border-corner-shape
Summary
Specifies different corner clipping effects, such as scoop (inner curves), bevel (straight cuts) or notch (cut-off rectangles). Works along with border-radius to specify the size of each corner effect.
Overview table
- Initial value
curve- Applies to
- all elements, except table element when ‘border-collapse’ is ‘collapse’
- Inherited
- No
- Media
- visual
- Computed value
- as specified
- Animatable
- No
- CSS Object Model Property
borderCornerShape- Percentages
- N/A
Syntax
border-corner-shape: bevelborder-corner-shape: curveborder-corner-shape: notchborder-corner-shape: scoop
Values
- curve
- Border radii define a convex curve at the corner (default behavior of border-radius).
- bevel
- Border radii define a diagonal slice at the corner.
- scoop
- Border radii define a concave curve at the corner (informally called “negative border-radius”)
- notch
- Border radii define a concave rectangular notch at the corner.
Examples
Create a diamond (rhombus) shape
border-corner-shape: bevel;
border-radius: 50%;
Create a trapezoid
border-corner-shape: bevel;
border-radius: 25% / 100% 100% 0 0;
Related specifications
- CSS Level 4 - Backgrounds and Borders Module
- W3C Editor’s Draft
See also
Related articles
Box Model
border-corner-shape