The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.
This article is Ready to Use.
W3C Editor's Draft
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.
|Initial value|| |
|Applies to||all elements, except table element when ‘border-collapse’ is ‘collapse’|
|Computed value||as specified|
|CSS Object Model Property|| |
- Border radii define a convex curve at the corner (default behavior of border-radius).
- Border radii define a diagonal slice at the corner.
- Border radii define a concave curve at the corner (informally called "negative border-radius")
- Border radii define a concave rectangular notch at the corner.
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;
|CSS Level 4 - Backgrounds and Borders Module||W3C Editor’s Draft|