corner-end-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-end-end-shape CSS property specifies the shape of a box's block-end and inline-end 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-end-shape: scoop; corner-end-end-shape: notch; /* superellipse() function values */ corner-end-end-shape: superellipse(4); corner-end-end-shape: superellipse(-0.5); /* Global values */ corner-end-end-shape: inherit; corner-end-end-shape: initial; corner-end-end-shape: revert; corner-end-end-shape: revert-layer; corner-end-end-shape: unset;

Values

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

Formal definition

Value not found in DB!

Formal syntax

corner-end-end-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-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 60 pixels, and a corner-end-end-shape of squircle.

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: green; 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; corner-end-end-shape: squircle; }

Result

The rendered result looks like this:

Specifications

Specification
CSS Borders and Box Decorations Module Level 4 # propdef-corner-end-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