corner-inline-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-inline-end-shape CSS property specifies the shape of both the corners on a box's inline-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-inline-end-shape property is a shorthand for the following physical properties:

Syntax

css

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

Values

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

If one value is used, it specifies the shape of both inline-end corners.
If two values are used, the first one specifies the shape of the block-start/inline-end 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-inline-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-inline-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 15% 30%, and a corner-inline-end-shape of bevel squircle.

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: 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: 15% 30%; corner-inline-end-shape: bevel squircle; }

Result

The rendered result looks like this:

Specifications

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

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on ⁨Sep 15, 2025⁩ by MDN contributors.

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