Skip to content
ToolBoxGeniehome

Border Radius Generator

Developer Tools · Added

border-radius looks like one number and is actually eight — a horizontal and a vertical radius for each of the four corners. When the two differ the corner becomes an ellipse rather than a circle, and that is where organic, leaf and blob shapes come from. This sets every one of them, previews the result at a size you choose, works out whether the browser will shrink your radii to make them fit, and writes the CSS in the shortest form that means the same thing.

Percent resolves against the box, so it scales with it

px
px
Corner radius
Presets:

Result

border-radius: 16px;
Shape
Evenly rounded

How this reads visually

Values written
1 of four

Shortened to the fewest that mean the same

Browser scaling
None needed

The radii fit the box

Written out in full

border-radius: 16px 16px 16px 16px;

The eight-value form puts the four horizontal radii before the slash and the four vertical ones after it, and each corner becomes an ellipse where the two differ. That is where organic, leaf and blob shapes come from — turning on elliptical corners above unlocks it. Corners are always listed clockwise from the top left, the same order as every other four-value CSS shorthand.

How to use the border radius generator

  1. 1Choose a unit — percentages resolve against the box, so they scale with it.
  2. 2Drag each corner's slider, or type an exact value beside it.
  3. 3Turn on elliptical corners to set the horizontal and vertical radius separately.
  4. 4Adjust the preview box size to check the shape at the dimensions you will actually use.
  5. 5Copy the CSS, or read the longhand underneath if you want to see all eight values written out.

Examples

A card

Input
12px on every corner
Result
border-radius: 12px;

Four equal values collapse to one, which is why most CSS never reveals that there are eight underneath.

A pill

Input
999px on every corner of a 320 × 200 box
Result
The browser scales the radii to 31.25% so they fit

A radius larger than the box is legal, and the browser shrinks every radius uniformly until the edges accommodate them.

An organic blob

Input
60/40/30/70 horizontal, 40/60/70/30 vertical, in percent
Result
border-radius: 60% 40% 30% 70% / 40% 60% 70% 30%;

Eight different values, four elliptical corners, and a shape no single radius could produce.

About the border radius generator

Eight values hiding behind one

The reason border-radius has eight components rather than four is that a corner is an arc, and an arc needs two radii to be fully described unless you assume it is circular. CSS does not make that assumption, which is why the property has a syntax most people never encounter — a single value expands to all eight, and four values expand to eight by pairing each with itself.

Once the elliptical form is available, shapes become possible that no amount of fiddling with four values can reach. A leaf shape is two opposite corners at 100% and the other two at 0. A blob is eight different percentages, and small changes to any of them shift the outline in ways that are hard to predict and easy to explore — which is exactly the sort of thing a generator with sliders is for.

The property is also animatable, and interpolates smoothly between two sets of eight values. That makes morphing between shapes a one-line transition, and it is the mechanism behind the organic blob animations that appear as decorative backgrounds — no SVG, no JavaScript, just two sets of eight percentages and a duration.

Choosing a radius that looks right

Corner radius is one of the strongest signals of visual character in an interface, and it is worth being deliberate rather than accepting a default. Small radii of two to four pixels read as precise and technical. Eight to sixteen reads as friendly and modern, which is why most current design systems sit there. A fully rounded pill reads as an action — it is why buttons and tags are so often shaped that way.

Nesting is where a single value stops being enough. A rounded element inside another rounded element looks wrong when both use the same radius, because the inner curve appears to bulge against the outer one. The rule that fixes it is that the inner radius should equal the outer radius minus the padding between them, which keeps the two curves concentric. A 16px card with 8px of padding wants an 8px radius on whatever sits inside it.

Consistency matters more than the specific number. A design that uses 6, 8 and 10 pixels in different places looks accidental even though no individual value is wrong. Picking two or three radii — one for small controls, one for cards, one for pills — and using nothing else is what makes a set of components look like a set.

Frequently asked questions

What does the slash in the value mean?
It separates the horizontal radii from the vertical ones. Everything before it is the four horizontal radii, clockwise from the top left; everything after is the four vertical ones in the same order. When a corner's two radii differ, that corner is a quarter of an ellipse rather than a quarter of a circle — which is the entire mechanism behind organic and asymmetric shapes in CSS.
Why did my radius get smaller than I asked for?
Because the radii along at least one edge added up to more than that edge is long, and the browser scales to fit. The rule in the specification is to find the smallest ratio of edge length to the sum of the two radii touching it, and if that is below 1, multiply every radius on the box by it. The scaling is uniform across all four corners rather than per edge, which is why enlarging one corner can visibly shrink the opposite one.
Should I use pixels or percentages?
Pixels for a fixed, consistent curve — a card looks wrong if its corners get rounder as it gets wider. Percentages when the shape should scale with the box, which is what makes a 50% radius produce a circle on a square element and an ellipse on a rectangular one. The subtlety is that a horizontal radius in percent resolves against the width and a vertical one against the height, so 50% everywhere fills the box with an ellipse rather than drawing a circle inside it.
In what order are the four values written?
Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. That is the same order as every other four-value CSS shorthand. The shorthand rules are the same too — one value applies to all four, two values set the two diagonal pairs, and three values set the top-left, then both of the other diagonal corners, then the bottom-right.
Does a border radius clip the content inside?
It clips the background and the border, and it clips a child element only if that child has `overflow: hidden` applied by the parent. Text and inline content are not reflowed to follow the curve, so long content in a heavily rounded box will run into the corners visually. If a rounded image is overflowing its container, the fix is `overflow: hidden` on the container rather than a radius on the image.

Related tools