Border-radius: eight values, elliptical corners, and squircle presets

Published: 2026-09-05

How CSS border-radius shorthand works—from one value to the eight-value elliptical form—and how squircle-style and pill presets map to real CSS.

border-radius rounds the corners of a box. Most UIs start with one length (12px) or a four-corner list. The full syntax goes further: up to eight lengths split by a slash, so each corner can have a different horizontal and vertical radius—true elliptical arcs, not only circular ones.

Shorthand without a slash (circular corners)

When every corner’s horizontal radius equals its vertical radius, you stay on the simple side of the property—the same four-corner order as margin and padding:

Values	Meaning
1	All four corners equal
2	Top-left + bottom-right · top-right + bottom-left
3	Top-left · top-right + bottom-left · bottom-right
4	Top-left · top-right · bottom-right · bottom-left

border-radius: 12px;
border-radius: 8px 24px;
border-radius: 0 16px 32px;
border-radius: 0 16px 32px 8px;

Corner order is always TL → TR → BR → BL (clockwise from the top left). Percentages are allowed and resolve against the box’s width (horizontal radii) and height (vertical radii)—useful for responsive cards, but easy to misread when the box is not square.

A classic pill (fully rounded ends on a short rectangle) uses a radius larger than half the smaller dimension. Design tools often emit 9999px or 50% for that; both clamp to the maximum useful curve for the box.

The slash form: elliptical corners (up to eight values)

When a corner’s X and Y radii differ, CSS uses two lists separated by /:

border-radius: <horizontal-radii> / <vertical-radii>;

Each side of the slash is itself a 1–4 value shorthand for the four corners. Expanding fully:

border-radius:
  tl-x tr-x br-x bl-x
  /
  tl-y tr-y br-y bl-y;

Example—soft top, flatter sides:

.card {
  border-radius: 24px 24px 16px 16px / 40px 40px 12px 12px;
}

Mental model: each corner is a quarter-ellipse. Equal X and Y → quarter-circle. Different X and Y → stretched arc. That is how “squircle-ish” UI shapes appear in plain CSS without SVG path magic.

Browsers (and careful generators) collapse redundant lists. If every corner is circular, the slash disappears and you get a compact 1–4 value string. If horizontal and vertical shorthands happen to match, you also get a single list—even when you authored eight numbers in a UI.

What “squircle” means in CSS practice

A true squircle (superellipse) is a mathematical curve between a square and a circle—common in icon masks and some native UI. CSS border-radius alone cannot express a perfect superellipse; it only draws elliptical arcs between the sides.

In product CSS, “squircle” usually means a preset of elliptical corners that look softer than a uniform Npx radius on a square card—larger vertical radii on some corners, larger horizontal on others—so the silhouette feels continuous rather than “rounded rectangle.” LocalTools’ squircle preset is that kind of approximation: paired X/Y values you can tweak, not a separate CSS function.

Prefer a real path (clip-path, SVG, or a design-tool export) when you need pixel-perfect brand squircles. Prefer border-radius when you want copy-paste tokens, shadows that follow the box, and easy theming (layered box-shadow follows the same rounded edge).

Presets you will reuse

Preset idea	Typical CSS idea	Notes
Soft	Uniform small radius (`8px`)	Dense UI, chips, dense tables
Rounded	Uniform medium (`16px`)	Cards, dialogs
Pill	Huge equal radii (`9999px`)	Buttons, tags; clamps to capsule
Squircle-style	Eight-value elliptical pairs	Softer silhouette on square previews
Asymmetric	Mixed corners (e.g. sharp TL, large BR)	Marketing tiles, “ticket” shapes

Linking all corners keeps a token uniform while you explore size. Unlinking corners—and unlinking X from Y—unlocks the elliptical form the slash syntax encodes.

Pitfalls and tips

Overflow and children. border-radius alone does not clip descendants; add overflow: hidden (or nest a clipped inner) when images stick out of rounded corners.
Percent vs px. % radii change with box size; px/rem stay absolute. Mixing them across corners is valid but hard to reason about in reviews.
Half-size cap. A radius larger than half the corresponding side is clamped. Giant pill values are fine; they do not create a bigger curve than geometry allows.
Shorthand vs longhands. border-top-left-radius: 20px 40px sets one elliptical corner. The slash shorthand sets all four at once—prefer one style in a design system.
Shadows and outlines. box-shadow follows the curve; default outlines may not. Pair radius tokens with focus styles that stay visible (WCAG contrast for focus rings).
Fluid layouts. Radius can stay fixed while padding and type use clamp() (CSS clamp and fluid type); or scale radius with container-aware tokens if cards grow a lot.

Why tune radius locally

Corner tokens and brand “squircle” recipes are easy to paste into online generators. A client-side builder keeps those values in your tab—same privacy habit as other LocalTools utilities (Why “local only” matters for developer tools).

Try it on LocalTools

Open the CSS border-radius generator:

Start from a preset (Soft, Rounded, Pill, Squircle, or Asymmetric) or the default corners.
Link all corners for a uniform radius, or tune each corner; disable circular corners to set horizontal and vertical radii independently (eight-value / form).
Switch the preview surface (light, dark, gradient) and copy the compact border-radius declaration into your CSS or tokens.

Nothing is uploaded; the CSS updates as you edit.