Squircle Corner-Shape Tile

Four tiles, same `border-radius`, four different corner *geometries* — `round` (the only curve `border-radius` alone has ever been able to draw), `squircle`, `bevel`, and `scoop` — all from the new CSS `corner-shape` property, no SVG/clip-path masking, no JS. `border-radius` still sets the SIZE of the corner box; `corner-shape` now independently sets the CURVE drawn inside it. `squircle` is shorthand for `superellipse(2)`, the continuous Apple-style curve (iOS app icons, visionOS panels) that a plain circular arc can only ever approximate — this is the real native primitive behind that now-common 'squircle' look, not a border-radius trick pretending to be one. **Real, current, cross-checked (not a single blog's guess):** MDN's own `corner-shape` and `corner-shape-value` reference pages plus Chrome's engineering blog ('The corner cases of implementing CSS corner-shape in Blink') and its Blink-dev Intent-to-Ship thread agree: shipped stable in Chrome/Edge 139 (2025) and Opera 123+; Firefox and Safari have not shipped it as of this writing (per caniuse and CSS Portal's own property tables, checked this run, not assumed from memory). Spotted as a live 2026 design-trend signal, not invented: an Awwwards inspiration entry ('Squircle footer' by Fiddle.Digital) is already using this exact look. **Honest fallback, verified against spec behavior, not hoped for:** `corner-shape`'s own initial value is `round` — a browser that doesn't parse the property drops every `corner-shape` declaration below at parse time and every tile (including the three non-`round` ones) simply renders as the same plain rounded card underneath, identical to this catalog's other `@supports`/cascade-guarded entries. No WebGL, no scroll-jacking, pure CSS-in-the-cascade — fits the DIY $999 tier as cleanly as it fits here. (Vanilla example: live iframe preview + HTML/CSS tabs, four tiles side by side, labeled by their own `corner-shape` value.)

<div class="scs-grid">
  <div class="scs-tile scs-round"><span class="scs-label">round</span></div>
  <div class="scs-tile scs-squircle"><span class="scs-label">squircle</span></div>
  <div class="scs-tile scs-bevel"><span class="scs-label">bevel</span></div>
  <div class="scs-tile scs-scoop"><span class="scs-label">scoop</span></div>
</div>