corner-shape (squircle, scoop, notch, bevel, superellipse())

Nur Chrome 139; Safari und Firefox haben keinen öffentlichen Zeitplan (2026-09). Nicht Baseline.

Chrome 139Edge 139Safari noFirefox no

Ändert, was `border-radius` zeichnet: `squircle` (kontinuierliche Kurven im iOS-Stil), `scoop` (nach innen), `notch` (eckige Ausschnitte), `bevel` (Fasen) oder jede `superellipse(k)`. Gilt pro Ecke und animiert.

squirclescoopnotchbevel

CSS

.fx-050 {
  display: flex;
  gap: 12px;
  font: 13px system-ui;
  color: #fff
}
.fx-050 span {
  display: grid;
  place-items: center;
  width: 90px;
  height: 60px;
  background: #2563eb;
  border-radius: 20px
}
.fx-050 .sq {
  corner-shape: squircle
}
.fx-050 .sc {
  corner-shape: scoop
}
.fx-050 .no {
  corner-shape: notch
}
.fx-050 .be {
  corner-shape: bevel
}

HTML

<div class="fx-050"><span class="sq">squircle</span><span class="sc">scoop</span><span class="no">notch</span><span class="be">bevel</span></div>

Fallback: Andere Browser rendern normale runde Ecken; nutze `@supports (corner-shape: squircle)` nur, wenn sich das Design anderswo ändern muss.

Quelle: developer.mozilla.org/docs/Web/CSS/Reference/Properties/corner-shape and https://caniuse.com/mdn-css_properties_corner-shape

Prompt

Gib Buttons, Karten und Avataren `corner-shape: squircle` zusammen mit einem großzügigen `border-radius` für kontinuierliche iOS-artige Ecken; nutze `bevel`/`notch`/`scoop` für Ticket- und Tag-Formen. Es ist 2026 Chromium-only, also ist der Basis-`border-radius` der Fallback, und es sollte kein JS- oder clip-path-Polyfill ergänzt werden.