Fylgja Button Corner Shape

Buttons do not have to be rounded rectangles. The CSS corner-shape property changes how each corner inside the border radius is drawn: a smooth squircle, a straight bevel, a square notch, or an inward scoop. It only changes the shape, so the border, background, focus ring, and hover styles of the Button still apply, and browsers without support simply show normal rounded corners.

Preview

<button type="button" style="--btn-radius: 0.75rem; corner-shape: squircle">Squircle</button>
<button type="button" style="--btn-radius: 0.75rem; corner-shape: bevel">Bevel</button>
<button type="button" style="--btn-radius: 0.5rem; --btn-px: 1.25rem; corner-shape: notch">Notch</button>
<button type="button" style="--btn-radius: 0.75rem; corner-shape: scoop">Scoop</button>

Usage

  • Set --btn-radius to the size of the corner, then corner-shape to its shape. The radius decides how big the corner is, the shape decides how it is drawn.
  • The keywords are round (the default), squircle, bevel, notch, scoop, and square.
  • Like border-radius, corner-shape takes up to four values, one per corner, in the same order: top left, top right, bottom right, bottom left.
  • Shapes that cut into the button need a bit more padding, set with --btn-px.

Anatomy

Part Responsibility
--btn-radius How big each corner is. Without it there is nothing to shape.
corner-shape How each corner is drawn, from a smooth curve to a sharp cut.
--btn-px Extra padding to keep the label clear of deep cuts.

Accessibility

  • The shape is purely visual. The element stays a native button with its role, label, and keyboard behavior.
  • Keep shapes consistent per action type, so users learn what a shape means. A different shape for every button makes a page harder to scan.
  • An arrow shaped button is still read by its text. Write “Next” or “Back” in the label, do not rely on the shape to point the way.

Variants

Primary

The shapes work on any button style, including a filled primary button.

<button type="button" class="btn --primary" style="--btn-radius: 1rem; corner-shape: squircle">Squircle</button>
<button type="button" class="btn --primary" style="--btn-radius: 0.75rem; corner-shape: bevel">Bevel</button>
<button type="button" class="btn --primary" style="--btn-radius: 0.5rem; --btn-px: 1.25rem; corner-shape: notch">Notch</button>
<button type="button" class="btn --primary" style="--btn-radius: 0.75rem; corner-shape: scoop">Scoop</button>

Mixed corners

Give each corner its own shape and radius to make arrows, tags, and tabs. The arrows use a vertical radius of 50%, so the bevels meet in a point, and a fixed horizontal radius for the depth of that point. Pad the pointed side by a bit more than that depth, so the label stays clear of it.

<button type="button" style="--btn-radius: 1em 0 0 1em / 50%; --btn-px: 1.5em 1em; corner-shape: bevel round round bevel">Back</button>
<button type="button" style="--btn-radius: 0 1em 1em 0 / 50%; --btn-px: 1em 1.5em; corner-shape: round bevel bevel round">Next</button>
<button type="button" style="--btn-radius: 0.75rem; corner-shape: bevel round">Tag</button>
<button type="button" style="--btn-radius: 0.75rem 0.75rem 0 0; corner-shape: bevel">Tab</button>

Superellipse

superellipse() takes a number for a shape between the keywords. Negative values curve inward, 0 is a straight bevel, 1 is round, and higher values get closer to a square corner.

<button type="button" style="--btn-radius: 1.25rem; --btn-px: 1.75rem; --btn-py: 0.75rem; corner-shape: superellipse(-1)">Concave</button>
<button type="button" style="--btn-radius: 50%; corner-shape: superellipse(0.5)">Pinched</button>
<button type="button" style="--btn-radius: 1rem; corner-shape: superellipse(3)">Soft</button>

Related: Button, Icon Button, Button Group.

FAQ

Which browsers support corner-shape?

Chromium based browsers support it. Other browsers ignore the property and show the normal rounded corners from --btn-radius, so the button still looks fine and works the same. No fallback code is needed.

Why does corner-shape do nothing on my button?

The shape is drawn inside the border radius. Without a radius there is no corner to shape, so always set --btn-radius as well.

Why do some shapes need more padding?

Notch, bevel, and concave shapes cut into the button, so the label can touch the edge. Raise --btn-px or --btn-py to give the text room again.