CSS Border Radius Generator
Shape corners visually — round them all at once, set each corner separately, or build organic blob shapes with elliptical radii. Copies the shortest valid border-radius CSS.
Presets
Mode
Radius
Corners
Elliptical corners (horizontal / vertical, %)
Preview box
Output
What Is border-radius?
The CSS property that rounds the corners of an element's outer border edge.
border-radius rounds an element's corners — and the background, border, shadow and outline all follow the curve. It's how buttons, cards, avatars and pills get their shape without any images.
The shorthand takes one to four values, applied clockwise from the top-left: top-left top-right bottom-right bottom-left. Missing values copy their opposite corner, so 12px 0 rounds the top-left and bottom-right only.
Each corner can also be an ellipse with separate horizontal and vertical radii, written after a slash: 30% 70% 70% 30% / 30% 30% 70% 70%. Mixing these values creates the soft, organic “blob” shapes popular in modern design.
Percentages are relative to the element's size (width for horizontal radii, height for vertical), so 50% turns a square into a circle and a rectangle into an ellipse. For a pill shape on any size, use a very large pixel value such as 9999px.
border-radius Patterns
Common shapes and the CSS that makes them.
border-radius: 12px;
One value — every corner gets the same radius. The most common card and button style.
border-radius: 12px 0;
Two values — top-left & bottom-right, then top-right & bottom-left.
border-radius: 12px 12px 0 0;
Four values, clockwise from top-left. This one is a tab: rounded on top, square at the bottom.
border-radius: 50%;
A circle on square elements, an ellipse on rectangles. Ideal for avatars.
border-radius: 9999px;
A pill: the radius is capped at half the shorter side, so the ends are always perfectly round.
… / … elliptical radii
Values after the slash are the vertical radii. Use them for leaf, egg and blob shapes.
How to Use the CSS Border Radius Generator
Get your result in under ten seconds.
Choose a mode
Round all corners, set each corner, or switch to elliptical mode for blobs. Presets give you a quick start.
Shape it
Drag the sliders and resize the preview box to match your element. Try Random blob in elliptical mode.
Copy the CSS
Press Copy CSS — you get the shortest valid shorthand, or longhand properties if you prefer.
Why Use the CSS Border Radius Generator on Developers Web Tools
Fast, accurate and private — built for developers.
Three modes
Simple, per-corner and elliptical radii — from buttons to organic blob shapes.
Shortest shorthand
Values are collapsed the way CSS allows (4 → 3 → 2 → 1), and the slash part is left out when it isn't needed.
px or %
Pixel radii for fixed shapes, percentages for shapes that scale with the element.
Random blobs
Generate organic shapes with one click, then fine-tune them.
Smooth
Updates once per animation frame while you drag.
Private
Runs entirely in your browser.
Frequently Asked Questions
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. With three values, the second is used for both top-right and bottom-left; with two, the first is top-left & bottom-right and the second is top-right & bottom-left.
Make the element square (equal width and height) and set border-radius: 50%. Use the Circle preset.
Use a very large radius, e.g. border-radius: 9999px. Browsers cap the radius at half the shorter side, so the ends stay perfectly round at any width.
Values before the slash are horizontal radii; values after it are vertical radii. Different horizontal and vertical radii make elliptical corners.
The browser scales all radii down proportionally until they fit, so the shape never breaks — it just becomes as round as possible.
It clips the background and border. Child elements (like images) can still poke out of the corners — add overflow: hidden (or overflow: clip) to the parent to clip them.
Use px or rem for consistent corners on UI components, and % for shapes that should scale with the element, such as circles and blobs.
Only in your own browser (local storage). Press Reset to clear it.