CSS Border Radius Generator

How it works

Type a box colour into the left panel — it only paints the preview, because border-radius itself carries no colour. Then set the four corner sliders. In rounded-corner mode the values are pixels and the tool writes the shortest valid CSS: four equal corners collapse to a single border-radius: 16px, equal diagonals collapse to two values. For cards and buttons a radius between 8 and 24 pixels is the usual range, and the 16-pixel default sits comfortably in it. Switch to blob mode and the values become percentages: each slider sets that corner's HORIZONTAL radius, the tool derives the vertical radius as 100 minus your value, and the code comes out in the two-list slash syntax — the notation that gives a corner two different radii and turns a rectangle into an organic drop. The code on the right refreshes on every change; copy it into your stylesheet, or press Download to save the preview as a 1200×800 pixel PNG.

This tool is also known as css border radius generator, border radius css, rounded corners css, blob shape generator, border radius examples, fancy border radius.

What is border-radius?

border-radius is the CSS property that rounds the corners of an HTML box. One value applies to all four corners; up to four values address each corner separately, and the slash form gives every corner two radii — one horizontal, one vertical. Values can be fixed units like pixels or percentages of the box's own size, which is why 50% turns a square into a circle. The rounding is pure paint: it never moves the layout or changes the box's dimensions.

What is Blob shape?

A blob is the web-design name for soft, organic shapes that look like drops or pebbles rather than rectangles. In CSS it is built from a single box with a slash-syntax border-radius: giving each corner a different horizontal and vertical radius turns the corners into quarter ellipses and dissolves the box's rectangular outline. Blobs are popular for hero sections, portrait frames and decorative backgrounds — and because the shape is code, it needs no image file and stays sharp at every size.

What is the difference between pixel and percentage radii?

A pixel radius is absolute: a 16-pixel corner is the same size whether the box is 200 or 1000 pixels wide, which keeps families of cards looking consistent. A percentage is relative to the box itself: horizontal radii are measured against the width, vertical radii against the height. That is why 50% produces a circle on a square box but an ellipse on a rectangle, and why the corner grows with the box. The practical rule: pixels for interface components, percentages for shape work like circles and blobs.

The overflow rule: why 100 pixels stops making a circle

Drag a slider to its end and at some point the shape stops changing. That is not a bug but the CSS overflow rule: when the two radii along one edge add up to more than the edge is long, the browser scales ALL radii down by the same factor. A 200-pixel-wide button fits 100 + 100 pixels exactly; on a 300-pixel card the same corners still have room to grow. The preview applies the identical rule, so the shape you see is the shape the browser will draw.

If what you actually want is a circle or a pill, skip the pixel math: border-radius: 50% turns a square box into a circle, and border-radius: 999px turns a rectangular button into a pill. An oversized value like 999 is safe precisely because of the overflow rule — the browser clamps it to the largest radius that fits.

Which radius for which job?

Corner radius speaks a language just like shadows do: small radii read as serious, large radii as soft and friendly.

• Cards, panels, input fields → 8-16 pixels: the corner is visible without drawing attention
• Buttons → 8-12 pixels squared-off, or 999 pixels for a pill: both are common, but pick one language per page
• Avatars and badges → 50%: square content becomes a perfect circle
• Hero graphics and decorative backgrounds → blob mode: the slash syntax builds organic shapes

Frequently asked questions

What does the order of border-radius values mean?

Four values run clockwise from the top left: top left, top right, bottom right, bottom left. With fewer values the missing corners copy their diagonal: two values mean the first sets top-left and bottom-right, the second the other pair. This tool always writes the shortest valid form, so you can watch the code shrink as sliders become equal.

What is the slash syntax (30% 70% ... / 70% 30% ...)?

Everything left of the slash is the horizontal radii of the corners, everything right of it the vertical radii. When the two differ, a corner draws a quarter ellipse instead of a quarter circle — that is exactly where blob shapes get their organic look. In blob mode this tool derives the vertical list as 100 minus your horizontal value: a slider at 30 gives a vertical radius of 70. The rule is fixed, so the output is predictable.

Why doesn't my colour appear in the code?

Because border-radius only describes corner geometry; colour lives in separate properties such as background-color. The colour field here paints the preview so you can judge the shape against a real fill. When you paste the code, the corners apply to whatever colour your own element already has.

What does the Download button save?

A 1200×800 pixel PNG of the previewed shape — useful for dropping the corner style into a design review. For the code itself use the copy button; and if you want to round the corners of an actual image file, this site's image corner rounding tool does that job.