v139 · css

Per-Corner Mixer

Every corner of a box can have a different corner-shape. Mix squircle, notch, scoop, bevel, straight, and custom superellipse(k) values independently on top-left, top-right, bottom-right, and bottom-left. Design tickets, tags, directional arrows, and asymmetric cards.

Feature detection: checking…
Presets:
Corner shape controls
24px
↖ Top-left
k= 2.5
↗ Top-right
k= 2.5
↘ Bottom-right
k= 2.5
↙ Bottom-left
k= 2.5
Set all corners at once:
Live preview
Mixed corners
At different sizes:
24px
40px
button
Generated CSS

Use cases

/* Individual corner-shape longhands */
.element {
  border-radius: 24px;

  /* Each corner independently */
  corner-top-left-shape:     squircle;
  corner-top-right-shape:    notch;
  corner-bottom-right-shape: squircle;
  corner-bottom-left-shape:  notch;
}

/* Shorthand: corner-shape tl tr br bl */
.element {
  corner-shape: squircle notch squircle notch;
}

/* Per-side pairs: top-left/bottom-right, top-right/bottom-left */
.arrow-tab {
  border-radius: 8px;
  corner-shape: round straight straight round;
}

see also