corner-end-start-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-end-start-shape CSS property specifies the shape of a box's block-end and inline-start corner, within its border-radius area.

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

Syntax

css

/* Keyword values */ corner-end-start-shape: round; corner-end-start-shape: scoop; /* superellipse() function values */ corner-end-start-shape: superellipse(0.2); corner-end-start-shape: superellipse(-5); /* Global values */ corner-end-start-shape: inherit; corner-end-start-shape: initial; corner-end-start-shape: revert; corner-end-start-shape: revert-layer; corner-end-start-shape: unset;

Values

The corner-end-start-shape property is specified using a <corner-shape-value> value.

Formal definition

Value not found in DB!

Formal syntax

corner-end-start-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-end-start-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 60px / 20%, and a corner-end-start-shape of bevel.

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: orange; 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: 60px / 20%; corner-end-start-shape: bevel; }

Result

The rendered result looks like this:

Specifications

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

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Nov 7, 2025⁩ by MDN contributors.

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