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

Chrome 139 only; Safari and Firefox have no public timeline (2026-09). Not Baseline.

Chrome 139Edge 139Safari noFirefox no

Changes what `border-radius` draws: `squircle` (iOS-style continuous curves), `scoop` (inward), `notch` (square cut-outs), `bevel` (chamfers), or any `superellipse(k)`. Applies per corner and animates.

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: Other browsers render normal rounded corners; use `@supports (corner-shape: squircle)` only if the design must change elsewhere.

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

Prompt

Give buttons, cards and avatars `corner-shape: squircle` together with a generous `border-radius` for continuous iOS-like corners; use `bevel`/`notch`/`scoop` for ticket and tag shapes. It is Chromium-only in 2026, so the base `border-radius` is the fallback and no JS or clip-path polyfill should be added.