My Tool Studio
CSS

CSS Border Radius Generator

This border radius generator rounds all four corners at once, sets each corner separately, or gives every corner separate horizontal and vertical radii for organic blob shapes. Drag the handles on the preview shape or use the sliders and number fields, in px, % or rem, and the output always uses the shortest valid shorthand. Twelve shape presets load a card, pill, circle, tab, speech bubble, leaf, egg, blob and more, and Random blob makes a new organic shape each time. Set the preview width and height, fill it with a gradient, a color or your own image, and add a border. Copy CSS, longhand properties, Tailwind or SCSS, or share a link. For example, the Blob button writes 30% 70% 70% 30% / 30% 30% 70% 70%, ready to paste.

Always freeNo sign upRuns in your browser

Shapes

Show drag handles
Blue: horizontal radius. Switch to Elliptical for vertical handles. Arrow keys work on a focused handle.
Preview width192px
Preview height192px
border-radius: 24px;

Mode

Unit

All cornerspx
Add a border

How to use

01

Choose a mode and unit

Pick All corners, Per corner or Elliptical, then choose px, % or rem. Or press a shape preset such as Pill, Tab, Egg or Blob, or Random blob.

02

Drag the handles or sliders

Drag the blue handles along the edges for horizontal radii and the orange ones for vertical radii, or use the sliders and number fields. Set the preview size, fill and an optional border.

03

Copy the code

Pick the CSS, Longhand, Tailwind or SCSS tab and press Copy. Copy share link saves the shape and border in a URL.

Why CSS Border Radius Generator

border-radius shorthand forms

The shorthand can take one to four values, and an optional slash with a second set for vertical radii. Values run clockwise from the top-left corner, and any value that is left out copies the value from the opposite corner. The generator always writes the shortest form that gives the same shape, and writes 0 without a unit.

Each corner also has its own longhand property, such as border-top-left-radius, which takes one value or a horizontal and vertical pair.

ValueTop-leftTop-rightBottom-rightBottom-left
16px16px16px16px16px
16px 016px016px0
16px 8px 016px8px08px
16px 8px 4px 016px8px4px0
50% / 30%50% wide, 30% tall50% wide, 30% tall50% wide, 30% tall50% wide, 30% tall

Blob and organic shapes with 8-value border-radius

Blob shapes come from giving each corner a different horizontal and vertical radius in percent. The value 30% 70% 70% 30% / 30% 30% 70% 70% is a common starting point: the top edge splits 30 and 70, the right edge splits 30 and 70, and so on.

The trick for smooth edges is to make the two radii that meet on each side add up to 100%. On the top edge, top-left horizontal plus top-right horizontal equals 100%. When they add up to less, a straight segment appears; when they add up to more, the browser scales every radius down and the shape gets rounder.

Blobs work well for avatar frames, decorative backgrounds and image masks. To animate one, transition border-radius between two blob values; browsers interpolate each of the eight numbers. Keep the element square if you want the shape to look the same as in the default preview.

Common questions

How do I make a blob shape with border-radius?
Use the elliptical form with percentages, where each corner has a horizontal and a vertical radius. Press Blob or Random blob to get one. Random blob keeps opposite values on each edge adding up to 100%, so the edges stay smooth.
What does the slash mean in a border-radius value?
Values before the slash are the horizontal radii and values after it are the vertical radii, in the order top-left, top-right, bottom-right, bottom-left. Different horizontal and vertical radii make each corner an elliptical curve. Without a slash, both radii are equal.
What order do the four border-radius values go in?
Clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. Two values mean top-left and bottom-right, then top-right and bottom-left. Three values mean top-left, then top-right and bottom-left, then bottom-right.
Should I use px or % for border-radius?
Use px or rem for UI elements like cards and buttons, since the curve stays the same size whatever the element's shape; rem also scales with the user's font size. Use % for circles, ellipses and blobs, since the curve scales with the element. On a rectangle, 50% gives an oval, not a pill.
How do I make a pill-shaped button with border-radius?
Set a pixel radius larger than half the button height, for example 9999px. The browser shrinks radii that are too big so the curves fit, which leaves perfectly round ends. A 50% radius does not work here because it makes an oval on a wide button.
Why do large corner radius values stop changing the shape?
When the radii on one side add up to more than that side's length, the browser scales all radii down so the curves do not overlap. On the default 192px preview square, 96px on every corner already makes a circle, so higher values look the same.
Does border-radius clip images and children inside the element?
Not by itself. Backgrounds and borders are rounded, but a child image with square corners pokes out. Add overflow: hidden to the rounded parent, or give the child a matching radius, slightly smaller if the parent has padding.
Should I use border-radius or clip-path for angled corners?
border-radius only draws curves. For a flat, cut corner or any straight-edged shape, use clip-path with a polygon. Rounded means border-radius, and angled means clip-path.
Can I drag the corners of the border radius preview?
Yes. Blue handles on the top and bottom edges set each corner's horizontal radius, and in Elliptical mode orange handles on the sides set the vertical radius. Focus a handle and use the arrow keys for small steps, or hold Shift for steps of ten.
How do I write this border radius as a Tailwind class?
Open the Tailwind tab. It writes an arbitrary value such as rounded-[24px] or rounded-[30%_70%_70%_30%/30%_30%_70%_70%], with spaces turned into underscores. A very large pixel radius on all corners is written as rounded-full.

More CSS tools

View all

CSS Clip Path Generator

Visual clip-path editor with SVG import and PNG tracing

CSS

CSS Gradient Generator

Build linear, radial and conic gradients

CSS

CSS Box Shadow Generator

Build layered box shadows with presets

CSS

CSS Animation Generator

Build @keyframes animations from presets

CSS