CSS Border Radius Generator
Round corners exactly the way you want. Move one slider for all corners or set each separately, switch between pixels and percent, and use the elliptical mode for leaf and blob shapes. The shortest valid border-radius value is written for you.
- Runs in your browser
- No sign-up
- Free to use
Corners
Elliptical corners
Preview box
How to use CSS Border Radius Generator
- Pick a preset or choose the unit, pixels or percent.
- Move the sliders; untick “Same value for all corners” to shape each corner by itself.
- Turn on the separate vertical radius for elliptical corners and organic shapes.
- Copy the CSS and use it on your own element.
CSS Border Radius Generator features
Per-corner control
Top left, top right, bottom right and bottom left can each have their own radius.
Pixels or percent
Fixed radii for consistent corners, or percentages that scale with the element.
Elliptical corners
Separate horizontal and vertical radii, written with the slash syntax.
Shape presets
Rounded card, pill, circle, leaf, tab and blob.
Shortest shorthand
Equal values are collapsed, so four identical corners become a single value.
Resizable preview
Change the size of the preview box to see how the radius behaves at other proportions.
When to use CSS Border Radius Generator
- Cards, buttons, inputs and images with rounded corners.
- Pill-shaped tags and fully round avatars.
- Tabs and speech bubbles with only some corners rounded.
- Organic blob shapes for backgrounds and illustrations.
CSS Border Radius Generator FAQ
In which order are the four values applied?
Clockwise from the top left: top left, top right, bottom right, bottom left. With two values, the first applies to top left and bottom right and the second to the other two. With three, the second value is used for both top right and bottom left.
What is the difference between px and %?
A pixel radius is the same on every element, which keeps a design consistent. A percentage is relative to the size of the element: the horizontal radius to its width and the vertical radius to its height. 50% on a square gives a circle, and on a rectangle an ellipse.
How do I make a pill shape?
Use a radius larger than half the height of the element, for example 999px. The browser reduces radii that are too large to fit, so the ends become perfect half circles at any size. 50% does not work for this, because it produces an ellipse on a wide element.
What does the slash in border-radius mean?
It separates horizontal radii from vertical radii. In “30% 70% 70% 30% / 30% 30% 70% 70%”, the values before the slash are the horizontal radii of the four corners and those after it the vertical radii. Different values make each corner a quarter of an ellipse, which is how blob shapes are made.
Does border-radius clip the content?
It rounds the background and border. Child elements and images can still stick out of the corners unless the element has overflow set to hidden or clip.
What happens if the radii are larger than the element?
The browser scales all radii down proportionally until neighbouring curves no longer overlap. That is why very large values are safe and commonly used.
More than rounded rectangles
border-radius is one of the most used properties in CSS, and most of the time it is given a single small value. That one value hides a flexible model. Each corner of a box is rounded by a quarter of an ellipse, and you may set the horizontal and vertical radius of every corner independently. Eight numbers in total describe the shape, and the usual shorthand simply repeats one of them eight times.
The choice of unit changes the behaviour. Pixels describe a fixed curve, so a 12-pixel corner looks the same on a small tag and on a large card, which is normally what a design system wants. Percentages scale with the box, so a shape keeps its proportions when the element grows. This matters for responsive elements: a blob defined in percent stays a blob at any size, whereas the same shape in pixels would turn into a slightly rounded rectangle when enlarged.
Rounding only some corners creates familiar interface shapes. Two rounded top corners make a tab, three rounded corners with one square corner make a speech bubble, and opposite corners rounded heavily make a leaf. The elliptical syntax goes further and produces soft, irregular outlines that would otherwise need an SVG file, and since they are ordinary CSS, they can be animated between states.
When nesting rounded elements, the inner radius should be smaller than the outer one, roughly the outer radius minus the gap between the two. Equal radii on both make the inner corner look too round, a detail that separates polished interfaces from merely tidy ones.