RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/css/properties/border-corner-shape below:

border-corner-shape · WebPlatform Docs

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