CSS corner-shape: Squircles, Bevels and Notches

For years, border-radius gave us one kind of corner: a round curve. Anything else (bevels, notches, scooped “ticket” corners or Apple-style squircles) meant SVG masks, clip-path or extra wrapper elements, and those tricks usually broke borders and shadows. The CSS corner-shape property fixes that. It reshapes the curve that border-radius creates, and borders, outlines, shadows and backgrounds follow the new shape. It already works in Chromium browsers, and the Safari 27.3 beta now supports it too. This tutorial explains how corner-shape works, walks through every keyword and superellipse(), and gives you production-ready patterns with fallbacks.

Browser support right now

Safari 27.3 beta lists corner-shape among its new CSS features in Apple’s Safari 27.3 release notes, and MDN’s compatibility data was updated for Safari 27.3 beta with the full set of corner-*-shape properties. MDN still marks the property as “Limited availability” because it isn’t supported in every widely used browser. Treat it as a progressive enhancement: the fallback is ordinary rounded corners, which is perfectly fine.

The core idea

corner-shape doesn’t create corners by itself. It changes the shape of the curve inside the area defined by border-radius. If there’s no border-radius, or it resolves to 0, corner-shape has no effect.

.card {
  border-radius: 24px;   /* how big the corner area is */
  corner-shape: squircle; /* what the curve looks like */
}

The initial value is round, which looks exactly like border-radius on its own.

The keywords

Each keyword is shorthand for a superellipse() value. MDN lists the equivalents:

Positive numbers bulge outward, 0 is a straight line, and negative numbers curve inward. You can use any number in between, for example superellipse(1.5) for a corner halfway between round and squircle.

Setting different corners

Like border-radius, the shorthand takes one to four values:

/* all corners */
corner-shape: bevel;

/* top-left & bottom-right, top-right & bottom-left */
corner-shape: notch superellipse(0.6);

/* top-left, top-right & 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;

There are also longhands for single corners (corner-top-left-shape and so on), logical versions such as corner-start-start-shape for right-to-left and vertical writing modes, and side shorthands such as corner-top-shape, which sets both top corners.

Practical patterns

1. Squircle cards and avatars

Squircles feel softer than circles-on-rectangles and match modern app icons.

.app-icon {
  width: 96px;
  aspect-ratio: 1;
  border-radius: 30%;
  corner-shape: squircle;
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}

The shadow follows the squircle. That’s the big win over clip-path, which clips shadows away.

2. Beveled buttons

.btn-bevel {
  padding: 0.75rem 1.5rem;
  border: 2px solid currentColor;
  border-radius: 12px;
  corner-shape: bevel;
  background: #0f172a;
  color: #f8fafc;
}

.btn-bevel:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px; /* the outline follows the bevel too */
}

3. A “ticket” with scooped corners

<article class="ticket">
  <h3>Delhi → Mumbai</h3>
  <p>Seat 14C · Gate 22</p>
</article>

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

The dashed border traces the concave corners, with no SVG needed.

4. Tabs with one shaped side

.tab {
  border-radius: 14px 14px 0 0;
  corner-top-left-shape: bevel;
  corner-top-right-shape: bevel;
}

Only the top corners have a radius, so only they get the bevel.

5. Animated corners

The keywords map to superellipse() values, so the browser can interpolate between them smoothly:

.morph {
  border-radius: 50%;
  corner-shape: square;
  transition: corner-shape 400ms ease;
}

.morph:hover {
  corner-shape: notch;
}

@media (prefers-reduced-motion: reduce) {
  .morph { transition: none; }
}

What follows the shape (and what doesn’t)

MDN lists the properties that follow corner-shape: background-color, background-image, border, outline, box-shadow, overflow and backdrop-filter.

Two things to keep in mind:

• Content isn’t reshaped. Text and children are laid out in the normal rectangular box, so add enough padding that content doesn’t poke into a scooped or notched corner.
• Hit-testing uses the box. MDN’s demo shows that hovering over text sticking out past a cut corner still triggers :hover.

When opposite corners would overlap (for example a huge radius with scoop), the browser automatically scales the radii down to prevent overlap, just as it does for border-radius.

corner-shape has no effect when the newer border-shape property is set, because border-shape ignores border-radius.

Fallbacks with @supports

Most of the time no special fallback is needed. Browsers without support simply show round corners. When a design really depends on the shape, for example a bevel that matches an illustrated brand style, use @supports:

.badge {
  border-radius: 10px; /* fallback: rounded */
}

@supports (corner-shape: bevel) {
  .badge {
    corner-shape: bevel;
    padding-inline: 1.25rem; /* room for the cut corners */
  }
}

Avoid shipping clip-path and corner-shape together on the same element. The clip path will cut away the shadow and border that corner-shape keeps.

Accessibility and design tips

• Keep focus outlines visible. outline follows the shape, so you don’t have to drop it.
• Make sure shaped corners don’t reduce tap targets below a comfortable size on mobile.
• Use shapes consistently across a component family (buttons, cards, inputs) so the interface feels designed rather than random.

Key takeaways

• corner-shape changes the curve inside border-radius: round, squircle, bevel, scoop, notch, square or any superellipse() value.
• Borders, outlines, shadows, backgrounds, overflow and backdrop-filter follow the shape, unlike with clip-path.
• It works in Chromium browsers and is arriving in Safari 27.3. Older browsers fall back to round corners.
• Use @supports (corner-shape: bevel) when a layout tweak depends on the shape.

Sources: MDN: corner-shape, Safari 27.3 release notes and MDN BCD: Updates for Safari 27.3 beta.