corner-shape | CSS-Tricks

The corner-shape property in CSS defines the geometric shape of an element’s corners. It is used alongside the border-radius property, letting you choose from a variety of corner styles.

That variety of styles includes: rounded, squared, beveled, notched, or even ones based on a custom mathematical curve. Just make sure that the border-radius property is set to a non-zero value for corner-shape to take effect.

.element {
  border-radius: 30px;
  corner-shape: scoop;
}

Constituent properties

The corner-shape property is a shorthand for the individual corner shape properties:

corner-top-left-shape
corner-top-right-shape
corner-bottom-right-shape
corner-bottom-left-shape

.element {
  corner-shape: scoop;

  /* same as, in this order: */
  corner-top-left-shape: scoop;
  corner-top-right-shape: scoop;
  corner-bottom-right-shape: scoop;
  corner-bottom-left-shape: scoop;
}

Those are the constituent properties based on each corner’s physical direction. There are logical equivalents as well:

corner-start-start-shape
corner-start-end-shape
corner-end-start-shape
corner-end-end-shape

Syntax

corner-shape: <corner-shape-value>{1,4}

In other words, the <corner-shape-value> takes some keyword value, or the superellipse() function.

Initial value: round
Applies to: all elements where border-radius can apply
Inherited: no
Computed value: the individual constituent property values, as specified
Animation type: discrete

Values

The corner-shape property accepts one, two, three, or four values that define the shape of each corner, starting from the top-left corner, moving clockwise. A single value applies to all four corners at the same time, just like the example in the last section. We’ll cover working with two or more values in just a bit.

We also mentioned the superellipse() function as an acceptable value. That defines how curved or concave a corner appears using a single numeric value. Positive values create outward-rounded corners, while negative ones form inward (or scooped) shapes.

Value	What it does	`superellipse()` equivalent
`round` (default)	The regular rounded corner you already know from `border-radius`.	`superellipse(1)`
`squircle`	A combination of a square and a circle, as the name suggests.	`superellipse(2)`
`square`	Keeps the corner perfectly right-angled, even if a radius is applied.	`superellipse(infinity)`
`bevel`	Cuts the corner diagonally, producing a flat edge.	`superellipse(0)`
`scoop`	Creates a concave (inward) quarter ellipse.	`superellipse(-1)`
`notch`	Produces a sharp inward corner.	`superellipse(-infinity)`
`superellipse(k)`	Lets you pick your own curve using a custom value for `k`.	N/A.

Basic usage

At its simplest, corner-shape works alongside border-radius to modify how corners are drawn:

.card {
  width: 250px;
  height: 160px;
  background: goldenrod;
  border-radius: 30px;
  corner-shape: scoop;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
}

In this example, corner-shape: scoop; transforms the normally rounded corners into concave “scooped” corners. The background, border, and box-shadow all follow the shape of the curve.

You can see a live demo of all six corner-shape keywords:

Working with multiple values

Since you can customize each corner individually, you can create a bunch of interesting combos with it. For example, you could mix different corner styles:

.box {
  border-radius: 30px;
  corner-shape: scoop round bevel notch;
}

Each corner is styled in clockwise order: top-left, top-right, bottom-right, bottom-left (the same is true of the logical equivalents, e.g., start-start, start-end, etc.).

You can even use different radii for each corner or even mix corner types (like scoop and bevel) to build custom shapes:

.box {
  border-radius: 60px 30px 50% 10px;
  corner-shape: scoop bevel round notch;
}

You’re not limited to styling all four corners at once. You can also target two corners along one side using the directional properties. For example, corner-top-shape and corner-bottom-shape let you independently style the top and bottom using two values.

There are also logical property equivalents, such as corner-block-start-shape and corner-block-end-shape, which follow the writing direction of the document.

.box {
  border-radius: 40px;

  /* Physical properties */
  corner-top-shape: round;
  corner-bottom-shape: notch;

  /* Logical equivalents */
  corner-block-start-shape: round;
  corner-block-end-shape: notch;
}

This gives the top (or block-start) corners a rounded curve while giving the bottom (or block-end) corners a notch shape.

You can also mix and match specific corners, for example, styling three of them differently:

.box {
  border-radius: 40px;

  /* Physical properties */
  corner-top-left-shape: scoop;
  corner-top-right-shape: round;
  corner-bottom-right-shape: bevel;

  /* Logical equivalents */
  corner-start-start-shape: scoop;
  corner-start-end-shape: round;
  corner-end-start-shape: bevel;
}

The same results can also be achieved using the corner-shape shorthand. But note that the logical variations don’t have an equivalent shorthand and must be declared individually. In other words, when you’re using corner-shape, you’re setting all four physical properties at once.

Here’s a pretty cool playground to experiment with different corner-shape and border-radius combos (credit to Amit Sheen for the demo):

It’s worth noting that when working with multiple corner values, opposing corners could collide with one another. For example, if you apply a very large border-radius or certain corner-shape combinations, the curves from opposite sides might overlap in the middle of the element. The browser accounts for this automatically by constraining the radius values behind the scenes.

.box {
  border-radius: 80% 20px;  /* Would normally overlap, but the browser prevents it*/
  corner-shape: scoop;
}

Animations and transitions

You can apply transitions and animations to corner-shape just like other CSS properties. For example, here’s a simple animation that morphs a box from a square shape into a notched one:

@keyframes morph {
  from { corner-shape: square; }
  to { corner-shape: notch; }
}

div {
  border-radius: 50px;
  animation: morph 2s infinite alternate;
}

The animation cycles between the two shapes, with alternate causing it to reverse direction each time for a continuous loop.

You can also use corner-shape in transitions to react to user interactions like hover or focus. Here’s a live demo showing both an animation and a hover-based transition in action:

Specification

The corner-shape property is defined in the CSS Borders and Box Decorations Module Level 4 specification. As of this writing, the spec is in Editor’s Draft status, meaning details may change before it becomes a formal Candidate Recommendation.