Question 1

What does CSS border-radius actually do?

Accepted Answer

CSS `border-radius` rounds the corners of any element by clipping the element to a quarter-ellipse at each corner. The radius value defines that ellipse: a circular `border-radius: 10px` produces a 10×10 quarter-circle, while an elliptical `border-radius: 30px / 60px` produces a 30 wide × 60 tall quarter-ellipse. Combine four different per-corner radii to build almost any rounded shape that does not require an SVG.

Question 2

What is the difference between simple and elliptical border-radius?

Accepted Answer

Simple border-radius uses a single value per corner: the horizontal and vertical radii are equal, so the corner is a quarter-circle. Elliptical adds a slash followed by four more values: `border-radius: TL TR BR BL / TLy TRy BRy BLy`. This lets each corner be a quarter-ellipse instead of a quarter-circle, unlocking leaf, blob, and asymmetric speech-bubble shapes. Enable the "Elliptical" toggle in our tool to expose the second radius slider per corner.

Question 3

Why does my output sometimes have one value and sometimes four?

Accepted Answer

CSS allows shorthand collapsing when corners match. Our tool emits the shortest valid form: one value when all four corners are equal, two values for the (top-left + bottom-right, top-right + bottom-left) pattern, three values when only the diagonals match, four values for full asymmetry. This matches Prettier's default output and saves bytes in your stylesheet.

Question 4

When should I use percentage units instead of pixels?

Accepted Answer

Use percentages when you want the radius to scale with the element — for example, `border-radius: 50%` always produces a circle regardless of width and height. Use pixels (or rem) when you want a fixed visual size — your card-corner radius should stay 12px whether the card is 200px or 800px wide. Percentage radii are computed against the dimension of the element's box, so they're great for fluid, responsive shapes.

Question 5

How do I make a pill-shaped button?

Accepted Answer

Two patterns. (1) Set `border-radius` to any value larger than half the button height — `border-radius: 9999px` is the lazy programmer's favourite. The browser clamps the radius to half the smaller dimension automatically, producing a perfect pill regardless of width. (2) Or use percentages: `border-radius: 50%` makes a circle on a square; on a rectangle it produces a flattened ellipse, which is often what you actually want for an oval button.

Question 6

Is my radius configuration sent to any server?

Accepted Answer

No. The generator runs entirely in your browser. Brand radius tokens, pre-launch design experiments, internal style guides — none of it ever reaches our servers, no analytics tracking on the values, no save state.

Question 7

How do I use the Tailwind v4 output?

Accepted Answer

Tailwind v4 supports arbitrary CSS values via bracket notation: `rounded-[12px_24px]` or `rounded-[30px_/_60px]`. Our exported class is escape-safe — spaces are converted to underscores and slashes are preserved correctly so Tailwind's parser accepts it. Drop the class straight onto any element. For common radii (sm, md, lg, full), prefer Tailwind's built-in scale; use the arbitrary value for elliptical or asymmetric corners.

Question 8

Can I animate border-radius?

Accepted Answer

Yes. `border-radius` is interpolatable, so `transition: border-radius 200ms ease` works directly. This is how the "morphing blob" backgrounds you see on modern landing pages are built: two CSS keyframes with different per-corner ratios, animated forever. For performance, animate `border-radius` only on elements that don't change layout — composited transforms (translate, scale) are cheaper than re-rasterizing corner clips on every frame.

Question 9

What is a "squircle" and how is it different from a rounded square?

Accepted Answer

A squircle is a square with corners rounded enough that the shape blends into a near-circle without ever quite getting there — visually softer than a rounded rectangle, less aggressive than a circle. Apple uses it for iOS app icons. With pure CSS, you approximate a squircle by setting `border-radius` to 25–35% on a square element. For pixel-perfect Apple-style squircles you actually need an SVG path or `clip-path` — CSS quarter-ellipses are close, not exact.

Values	Means	Example
1 value	All four corners equal	`12px`
2 values	TL+BR \| TR+BL	`12px 24px`
3 values	TL \| TR+BL \| BR	`12px 24px 8px`
4 values	TL \| TR \| BR \| BL	`12px 24px 8px 16px`
x / y	Elliptical — horizontal then vertical radii	`30px / 60px`

Free CSS Border Radius Generator: Elliptical Support, Auto Shorthand

Elliptical Per-Corner Control

Auto-Shortened CSS Output

Multi-Format Export

100% Client-Side

The Border Radius Generator That Goes Beyond Rounded Rectangles

CSS border-radius Shorthand Cheat Sheet

When Each Shape Belongs in Your Design System

Production Pitfalls (and How We Handle Them)

Related CSS Design Utilities