Thecorner-block-start-shapeCSS property specifies the shape of both the corners on a box's block-start edge, within theirborder-radius area.

For a full description of corner shape behavior and multiple examples, see thecorner-shape shorthand property page.

Constituent properties

Thecorner-block-start-shape property is a shorthand for the following physical properties:

• corner-start-start-shape
• corner-start-end-shape

Syntax

/* Single keyword value set for both corners */corner-block-start-shape: notch;corner-block-start-shape: squircle;/* Single superellipse() value set for both corners */corner-block-start-shape: superellipse(2.7);corner-block-start-shape: superellipse(-2.5);/* Block-start/inline-start corner, block-start/inline-end corner */corner-block-start-shape: notch squircle;corner-block-start-shape: notch superellipse(-2.5);/* Global values */corner-block-start-shape: inherit;corner-block-start-shape: initial;corner-block-start-shape: revert;corner-block-start-shape: revert-layer;corner-block-start-shape: unset;

Values

Thecorner-block-start-shape property is specified using one or two<corner-shape-value> values:

• Ifone value is used, it specifies the shape of bothblock-start corners.
• Iftwo values are used, the first one specifies the shape of theblock-start/inline-start corner, and the second one specifies the shape of theblock-start/inline-end corner.

Formal definition

Formal syntax

corner-block-start-shape =
<'corner-top-left-shape'>{1,2}

<corner-top-left-shape> =
<corner-shape-value>

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

<superellipse()> =
superellipse(<number [-∞,∞]>|
infinity|
-infinity)

Examples

You can find other related examples on thecorner-shape reference page.

Basiccorner-block-start-shape usage

HTML

The markup for this example contains a single<div> element.

<div></div>

CSS

We give the box some basic styles, which we've hidden for brevity. We also apply abox-shadow, aborder-radius of40px 60px, and acorner-block-start-shape ofscoop notch.

body {  font-family: Arial, Helvetica, sans-serif;  width: 240px;  margin: 20px auto;}div {  width: 100%;  height: 180px;  display: flex;  justify-content: center;  align-items: center;  background-color: goldenrod;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}

div {  box-shadow: 1px 1px 3px gray;  border-radius: 40px 60px;  corner-block-start-shape: scoop notch;}

Result

The rendered result looks like this:

Specifications

Browser compatibility

See also

• corner-shape shorthand property
• corner-block-end-shape,corner-inline-start-shape, andcorner-inline-end-shape
• corner-top-shape,corner-bottom-shape,corner-left-shape, andcorner-right-shape
• border-radius shorthand property
• border-start-start-radius andborder-start-end-radius
• CSS borders and box decorations module
• CSS backgrounds and borders module