CSS <corner-shape-value> Data Type

The CSS <corner-shape-value> data type represents the shape used to form a rounded corner. It works with a corner radius to change the curve from the traditional rounded shape to alternatives such as a scoop, bevel, notch, square, or squircle.

Syntax

The <corner-shape-value> data type accepts the superellipse() function or one of six named values:

<corner-shape-value> = round | scoop | bevel | notch | square | squircle | <superellipse()>

<corner-shape-value> Values

Value	Description
`round`	Creates the standard rounded corner shape associated with `border-radius`.
`scoop`	Creates a concave rounded corner that curves inward.
`bevel`	Creates a diagonal cut across the corner.
`notch`	Creates an inward angular cut at the corner.
`square`	Creates a square corner shape within the area established by the corner radius.
`squircle`	Creates a smooth shape between a conventional rounded corner and a square corner.
`superellipse()`	Defines the corner shape using a numeric superellipse parameter.

The superellipse() Function

The superellipse() function provides direct control over the curvature of a corner. Its numeric parameter determines the shape of the curve, allowing shapes ranging from concave corners to increasingly square corners.

corner-shape: superellipse(2);
corner-shape: superellipse(4);
corner-shape: superellipse(-1);

The named corner-shape keywords correspond to particular superellipse shapes, making commonly used corner styles easier to specify without providing the numeric value directly.

<corner-shape-value> Example

The following example applies different corner shapes to elements with the same border-radius:

.round {
  corner-shape: round;
}
.bevel {
  corner-shape: bevel;
}
.scoop {
  corner-shape: scoop;
}
.squircle {
  corner-shape: squircle;
}

Browser Result

round

bevel

scoop

squircle

The corner radius determines the size of each corner, while corner-shape determines the shape used within that radius.

The <corner-shape-value> data type is used by the corner-shape property and its related longhand properties. It works together with the corresponding border-radius properties that establish the dimensions of each corner.

Specifications

The <corner-shape-value> data type is defined in the CSS Borders and Box Decorations Module Level 4 .

CSS <corner-shape-value> Data Type