corner-shape

Limited availability

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

Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.

Thecorner-shapeshorthand CSS property specifies the shape of a box's corners, within the area specified by itsborder-radius property value.

Constituent properties

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

Syntax

css

/* Single value set for all four corners */corner-shape: bevel;/* top-left and bottom-right, top-right and bottom-left */corner-shape: notch superellipse(0.6);/* top-left, top-right and bottom-left, bottom-right */corner-shape: superellipse(-1.2) square squircle;/* top-left, top-right, bottom-right, bottom-left */corner-shape: scoop superellipse(-1.6) superellipse(-2.2) round;/* Global values */corner-shape: inherit;corner-shape: initial;corner-shape: revert;corner-shape: revert-layer;corner-shape: unset;

Thecorner-shape property may be specified using one, two, three, or four<corner-shape-value> values:

Ifone value is used, it specifies the shape ofall four corners.
Iftwo values are used, the first shape applies to thetop-left and bottom-right corners, and the second to thetop-right and bottom-left corners.
Ifthree values are used, the first shape specifies the shape of thetop-left corner, the second to thetop-right and bottom-left corners, and the third to thebottom-right corner.
If four values are used, they specify the shape of thetop-left,top-right,bottom-right, andbottom-left corners, in that order (clockwise).

Values

<corner-shape-value>: Asuperellipse() or keyword equivalent describing the shape of the corner.

Thecorner-shape property is used to modify the shape of rounded corners created by theborder-radius property and its associated longhands. Already-rounded corners can be further customized in terms of the degree of rounding applied to them, allowing the creation of, for example, bevelled, notched, and squircle corners. Borders, outlines, shadows, and background effects applied to the container will follow the defined corner shape.

If aborder-radius is not applied to a container, or theborder-radius resolves to0,corner-shape will have no effect.

Thecorner-shape shorthand property and its associatedcorner-*-shape shorthands and longhands accept one to four<corner-shape-value> values. Each is specified directly as asuperellipse() function or a keyword describing a common shape. Each keyword is equivalent to a specificsuperellipse() value.

The default (initial) value ofcorner-shape isround, which gives the same effect as usingborder-radius on its own, withoutcorner-shape. There is also a keyword valuesquare, which gives the same effect as default square corners, effectively removing anyborder-radius applied. Thebevel value has the effect of drawing a straight line between the two ends of aborder-radius.

Differentcorner-shape values can be smoothly animated between, as thesuperellipse() equivalents of the keyword values are used as interpolation values.

Thecorner-shape shorthand is especially useful when you want all four borders to be the same, or you want to set different values using a single declaration. To set only one or two corner shapes at a time, use thecorner-*-shape shorthands and longhands.

`corner-*-shape` shorthands and longhands

Thecorner-shape shorthand defines the shapes of all four corners in one declaration.

To set only one corner shape at a time, use the corner shape longhands:

Physical longhand corner shape properties:
Logical longhand corner shape properties:

To set two corner shapes at a time, use the side shorthands:

Physical side shorthand properties:
Logical side shorthand properties:

Constraining opposite corner shape radii

When opposite corners haveborder-radius andcorner-shape values set that would cause the shapes to overlap, the browser constrains the values to prevent the overlap.

For example, the following values would cause the top-left and bottom-right corners to overlap, therefore the browser adjusts the firstborder-radius component to a value that avoids this.

css

div {  width: 480px;  height: 200px;  background-color: goldenrod;  border-radius: 80% 20px;  corner-shape: scoop;}

Properties that follow the corner shape

The following properties all follow the shape of the corner when set on the container:

SeeDemonstration of properties that follow thecorner-shape for some examples.

Formal definition

Value not found in DB!

Formal syntax

corner-shape =
<'corner-top-left-shape'>{1,4}

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

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

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

Examples

Basic`corner-shape` usage

HTML

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

html

<div>Nice scooped corners</div>

CSS

We give the box a fixedheight, abox-shadow, aborder-radius of 30 pixels, and acorner-shape ofscoop, along with some additional styles that we've hidden for brevity.

body {  font-family: Arial, Helvetica, sans-serif;  width: 240px;  margin: 20px auto;}div {  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)  );}@supports not (corner-shape: scoop) {  body {    all: unset !important;  }  body::before {    content: "Your browser does not support the 'corner-shape' property.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

div {  height: 180px;  box-shadow: 1px 1px 3px gray;  border-radius: 30px;  corner-shape: scoop;}

Result

The rendered result looks like this:

Note how thecorner-shape value ofscoop gives the container concave corners — the curve is an inversion of the defaultborder-radius curve. Note also how the background, border, and box shadow follow the shape of the curve.

Demonstration of properties that follow the`corner-shape`

HTML

The markup for this example contains a single<div> element with some text content inside it.

html

<div>  Some styles follow the corner shape, such as border, outline, box-shadow,  overflow, and backdrop-filter. This is useful for helping various aspects of  your design to not clash. As shown, it can result in some interesting visual  effects, so you should test your design carefully.</div>

CSS

To demonstrate how some styles follow the shape of a container's corners, we apply abackground-image to the document<body>, then apply aborder-radius of40px and acorner-shape ofscoop notch to the<div>.

We then apply the following to the<div>:

A semi-transparentbackground-color.
A different color and style ofborder on each edge.
Abackdrop-filter that inverts thebackground-image set on the<body>.
A:hover style so you can see that the clickable content area falls outside the corner shape.

Additional set up styles have been hidden for brevity.

html {  height: 100%;}body {  font-family: Arial, Helvetica, sans-serif;  height: inherit;  margin: 0;  display: flex;  justify-content: center;  align-items: center;}div {  width: 240px;  height: 180px;}@supports not (corner-shape: scoop notch) {  body {    all: unset !important;  }  body::before {    content: "Your browser does not support the 'corner-shape' property.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

body {  background: url("https://mdn.github.io/shared-assets/images/examples/leopard.jpg")    no-repeat;  background-size: cover;}div {  border-radius: 40px;  corner-shape: scoop notch;  background-color: rgb(255 255 255 / 0.2);  border-top: 3px solid blue;  border-left: 6px dashed red;  border-bottom: 9px solid yellow;  border-right: 12px double green;  backdrop-filter: invert(100%);}div:hover {  background-color: white;}

Result

The rendered result looks like this:

Note how most of the set styles follow the shape of the<div> resulting from itscorner-shape styles, but not all. The content is displayed relative to the original box, and the hover effect is still applied if you hover over the text sticking out past the top- and bottom-left corners.

Comparing`corner-shape` values

In this demonstration, you can select differentcorner-shape values and set differentborder-radius values on a container and compare the effects.

HTML

The markup for this example contains a<select> picker from which differentcorner-shape values can be selected, an<input type="range"> slider to select differentborder-radius values, and a<section> element to create a container to apply those values to. The select<option> elements provide multiple keyword andsuperellipse() value choices, broken into two groups using<optgroup> elements. In the case of the keyword values, we've also included thesuperellipse() value equivalent for each one, separated by a pipe character.

html

<form>  <div>    <label for="corner-shape-choice">Choose a corner-shape value:</label>    <select>      <optgroup label="Keywords">        <option value="square">square | superellipse(infinity)</option>        <option selected value="squircle">squircle | superellipse(2)</option>        <option value="round">round | superellipse(1)</option>        <option value="bevel">bevel | superellipse(0)</option>        <option value="scoop">scoop | superellipse(-1)</option>        <option value="notch">notch | superellipse(-infinity)</option>      </optgroup>      <optgroup label="Functions">        <option>superellipse(3)</option>        <option>superellipse(1.5)</option>        <option>superellipse(0.5)</option>        <option>superellipse(-0.5)</option>        <option>superellipse(-1.5)</option>        <option>superellipse(-3)</option>      </optgroup>    </select>  </div>  <div>    <label for="radius-slider">Choose a border-radius value:</label>    <input      type="range"           min="0"      value="45"      max="90"      step="1" />  </div></form><section></section>

CSS

We apply abox-shadow to the<section>. We also give the<section> and form elements some basic styles, which we've hidden for brevity.

html {  font-family: Arial, Helvetica, sans-serif;}body {  width: fit-content;  margin: 20px auto;}section {  display: flex;  justify-content: center;  align-items: center;  margin-top: 20px;}select {  padding: 3px 5px;}form div:nth-of-type(2) {  margin-top: 5px;  display: flex;}section {  width: 100%;  height: 180px;  background-color: gold;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}@supports not (corner-shape: scoop) {  body {    all: unset !important;  }  body::before {    content: "Your browser does not support the 'corner-shape' property.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

section {  box-shadow: 1px 1px 3px gray;}

const rectangle = document.querySelector("section");const select = document.querySelector("select");const range = document.getElementById("radius-slider");function setCorners() {  rectangle.style.cornerShape = select.value;  const brValue = `${range.value}px`;  rectangle.style.borderRadius = brValue;  rectangle.innerHTML = `<div><code>corner-shape: ${select.value};</code><br><code>border-radius: ${brValue};</code></div>`;}select.addEventListener("change", setCorners);range.addEventListener("input", setCorners);setCorners();

The JavaScript that applies the user-selected values to the<section> has been hidden for brevity.

Result

The rendered result looks like this:

Try selecting different values to see how this affects the shape of the corners.

`superellipse()` value comparison

In this example, we provide two<input type="range"> sliders allowing you to cycle through many differentcorner-shapesuperellipse() values andborder-radius values to compare the effects of each on a container.

HTML

The markup for this example contains two<input type="range"> elements from which differentcorner-shapesuperellipse() andborder-radius values can be selected, and a<section> element to apply those values to.

html

<form>  <div>    <label for="superellipse-slider">Choose a superellipse() value:</label>    <input      type="range"           min="-5"      value="0"      max="5"      step="0.1" />  </div>  <div>    <label for="radius-slider">Choose a border-radius value:</label>    <input      type="range"           min="0"      value="45"      max="90"      step="1" />  </div></form><section></section>

CSS

We apply abox-shadow to the<section> element. Additional basic styles have been hidden for brevity.

html {  font-family: Arial, Helvetica, sans-serif;}body {  width: fit-content;  margin: 20px auto;}section {  display: flex;  justify-content: center;  align-items: center;  margin-top: 20px;}form div {  margin-top: 5px;  display: flex;}section {  width: 100%;  height: 180px;  background-color: orange;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );}@supports not (corner-shape: superellipse(0)) {  body {    all: unset !important;  }  body::before {    content: "Your browser does not support the 'corner-shape' property.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

section {  box-shadow: 1px 1px 3px gray;}

const rectangle = document.querySelector("section");const superEllipseRange = document.getElementById("superellipse-slider");const borderRadiusRange = document.getElementById("radius-slider");function setCorners() {  const seValue = `superellipse(${superEllipseRange.value})`;  rectangle.style.cornerShape = seValue;  const brValue = `${borderRadiusRange.value}px`;  rectangle.style.borderRadius = brValue;  rectangle.innerHTML = `<div><code>corner-shape: ${seValue};</code><br><code>border-radius: ${brValue};</code></div>`;}superEllipseRange.addEventListener("input", setCorners);borderRadiusRange.addEventListener("input", setCorners);setCorners();

The JavaScript that applies the user-selected values to the<section> has been hidden for brevity.

Result

The rendered result looks like this:

Try selecting different values to see how this affects the shape of the corners.

Animating`corner-shape`

In this example, we demonstrate how thecorner-shape property can be animated.

HTML

html

<div></div>

CSS

We create a set of@keyframes that animate smoothly between thecorner-shape values ofsquare andnotch. We then apply ananimation based on those@keyframes to the<div> when its containing<html> element is hovered over or focused. Additional basic<div> styles have been hidden for brevity.

body {  width: 200px;  margin: 20px auto;}div {  width: 100%;  height: 200px;  background-color: green;  background-image: linear-gradient(    to bottom,    rgb(255 255 255 / 0),    rgb(255 255 255 / 0.5)  );  box-shadow: 1px 1px 3px gray;  border-radius: 50%;  corner-shape: square;  outline: none;}@supports not (corner-shape: square) {  body {    all: unset !important;  }  body::before {    content: "Your browser does not support the 'corner-shape' property.";    color: black;    background-color: #ffcd33;    display: block;    width: 100%;    text-align: center;    padding: 1rem 0;  }  body > * {    display: none;  }}

css

@keyframes corner-pulse {  0% {    corner-shape: square;  }  /* To make the starting point apparent, let us keep  the shape the same for a small duration. */  20% {    corner-shape: square;  }  100% {    corner-shape: notch;  }}div {  animation: corner-pulse infinite alternate 4s linear;}

Result

The rendered result looks like this:

Specifications

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

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Oct 1, 2025⁩ byMDN contributors.

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

Movatterモバイル変換

corner-shape

Constituent properties

Syntax

Values

Description

`corner-*-shape` shorthands and longhands

Constraining opposite corner shape radii

Properties that follow the corner shape

Formal definition

Formal syntax

Examples

Basic`corner-shape` usage

HTML

CSS

Result

Demonstration of properties that follow the`corner-shape`

HTML

CSS

Result

Comparing`corner-shape` values

HTML

CSS

Result

`superellipse()` value comparison

HTML

CSS

Result

Animating`corner-shape`

HTML

CSS

Result

Specifications

Browser compatibility

See also

Help improve MDN