corner-block-end-shape

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The corner-block-end-shape CSS property specifies the shape of both the corners on a box's block-end edge, within their border-radius area.

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

Constituent properties

The corner-block-end-shape property is a shorthand for the following physical properties:

Syntax

css

/* Single keyword value set for both corners */
corner-block-end-shape: square;
corner-block-end-shape: scoop;
/* Single superellipse() value set for both corners */
corner-block-end-shape: superellipse(3.5);
corner-block-end-shape: superellipse(-1.9);
/* Block-end/inline-start corner, block-end/inline-end corner */
corner-block-end-shape: square scoop;
corner-block-end-shape: square superellipse(-1.9);
/* Global values */
corner-block-end-shape: inherit;
corner-block-end-shape: initial;
corner-block-end-shape: revert;
corner-block-end-shape: revert-layer;
corner-block-end-shape: unset;

Values

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

If one value is used, it specifies the shape of both block-end corners.
If two values are used, the first one specifies the shape of the block-end/inline-start corner, and the second one specifies the shape of the block-end/inline-end corner.

Formal definition

Value not found in DB!

Formal syntax

corner-block-end-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 the corner-shape reference page.

Basic `corner-block-end-shape` usage

HTML

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

html

<div></div>

CSS

We give the box some basic styles, which we've hidden for brevity. We also apply a box-shadow, a border-radius of 80px / 40px, and a corner-block-end-shape of notch square.

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

css

div {
 box-shadow: 1px 1px 3px gray;
 border-radius: 80px / 40px;
 corner-block-end-shape: notch square;
}

Result

The rendered result looks like this:

[フレーム]

Specifications

Specification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-block-end-shape

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Oct 13, 2025⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content