Notice:
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.

border-corner-shape

< css‎ | properties
Jump to: navigation, search

border-corner-shape

This article is Ready to Use.

W3C Editor's Draft

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

CSS

border-corner-shape: bevel;
border-radius: 50%;

Create a trapezoid

CSS

border-corner-shape: bevel;
border-radius: 25% / 100% 100% 0 0;



Related specifications

Specification Status Related Changes
CSS Level 4 - Backgrounds and Borders Module W3C Editor’s Draft

See also

Related articles

Box Model


  • border-corner-shape
















External resources