This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

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: bevel
  • border-corner-shape: curve
  • border-corner-shape: notch
  • border-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

External resources