CSS corner-shape Goes Beyond Rounded Corners

I like a slightly unusual corner on a ticket or callout, especially when the CSS stays small. CSS corner-shape makes that possible by changing the curve inside the area defined by border-radius.

A corner can become a straight bevel or an inward scoop, for example. The property still has limited browser support, so I would use it for decoration that can fall back to an ordinary rounded box.

CSS corner-shape needs a radius

Start with a card that has enough padding to keep its content away from the corners:

<article class="card">
  <h2>A small callout</h2>
  <p>The corner is part of the decoration.</p>
</article>

.card {
  padding: 2rem;
  background: #eef2ff;
  border-radius: 2rem;
  corner-shape: bevel;
}

The radius defines the corner area; bevel draws a straight diagonal across it. Setting corner-shape without a nonzero radius has no visible effect, as the corner-shaping specification explains.

That relationship is worth keeping in mind when experimenting. Changing the shape chooses the kind of corner, while changing the radius controls how much of the box it occupies.

Cut a notch into the corner

For an inward right-angled cut, replace the card’s corner declarations with:

.card {
  border-radius: 1.5rem;
  corner-shape: notch;
}

The notch cuts into the corner area instead of rounding outward. The shape definitions distinguish that right angle from the curved cut produced by scoop.

I would give a notched card some breathing room. A decorative cut is less appealing when it competes with the first letter of a heading.

Scoop the corners for a softer cut

The scoop keyword makes an inward curve:

.card {
  border-radius: 2rem;
  corner-shape: scoop;
}

The concave curve gives the corner a different character from a normal rounded card. I can see it working on a coupon or event ticket, where the shape has a reason to stand out.

For the same card, compare notch and scoop before changing the radius. Keeping the size fixed makes it easier to see what the shape itself changes.

Choose a squircle or adjust the curve

For a fuller outward curve, use squircle:

.card {
  border-radius: 2rem;
  corner-shape: squircle;
}

The superellipse() reference describes squircle as equivalent to superellipse(2). The function also accepts intermediate values:

.card {
  border-radius: 2rem;
  corner-shape: superellipse(1.5);
}

A value of one gives the ordinary rounded curve. Values above one move toward a squarer curve; negative values produce inward curves.

I would start with a named shape. A custom number is useful when it serves a specific design, but squircle is easier to recognise later than an unexplained decimal.

Give each corner its own shape

Four values follow the physical corner order : top-left, top-right, bottom-right, then bottom-left.

.card {
  border-radius: 2rem;
  corner-shape: bevel round scoop square;
}

The square value keeps the last corner square even though a radius is present. Each value describes a different corner, so this is a useful way to compare shapes on one element.

For an actual component, I would probably choose a quieter combination. Four different corners can turn a small card into quite a busy object.

Try the scoop on a ticket

Change the example element’s class from card to ticket:

.ticket {
  padding: 2rem;
  background: #fef3c7;
  border-radius: 1.5rem;
  corner-shape: scoop;
}

The padding leaves space around the corner cuts. Check the shape with the real text and at the narrowest width the ticket will occupy.

I would use this for an optional visual cue on a ticket or badge. A reader should still recognise the component if the cuts disappear in another browser.

Keep the border attached to the corner

The corner shape also applies to the normal border, as shown in MDN’s border and shadow example :

.card {
  border: 2px solid #4338ca;
  border-radius: 2rem;
  corner-shape: bevel;
}

The border follows the shaped corner. That is the part I find particularly useful: a decorative box can keep an ordinary CSS border without another element just to imitate its edge.

Keep a rounded version underneath

MDN marks corner-shape as experimental and not Baseline . A base radius gives unsupported browsers a rounded card:

.card {
  padding: 2rem;
  background: #eef2ff;
  border-radius: 1rem;
}

@supports (corner-shape: bevel) {
  .card {
    border-radius: 1.5rem;
    corner-shape: bevel;
  }
}

Supporting browsers get the bevel. Browsers that cannot apply it keep the base styling, so the content does not depend on the decorative change.

I would keep this fallback even on a small experimental page. It costs little, and the plain card is a reasonable design in its own right.

Choose clip-path for a different outline

The clip-path property defines a clipping region, which can describe a polygon or another shape. It is useful when the design needs a different overall outline.

corner-shape suits a box whose corners need adjusting while its normal border follows along. I would choose between them based on that distinction, rather than replacing existing clipping code just because another property is available.

For a callout or ticket, an optional corner treatment is a small enough experiment. I would keep the rest of the component straightforward and let that one detail carry the decoration.

← Back to all articles