How to use the Border Radius Generator
- Drag a corner slider. With Same value for all corners ticked, every corner follows; untick it to shape each corner separately.
- Switch between px and %. Percent radii scale with the element, which is how circles and ellipses are made.
- Tick Elliptical corners to set horizontal and vertical radii separately, or press Random blob for an organic shape.
- Resize the preview to match your element, then press Copy CSS.
Features
- Four corners, linked or independent
- Pixels or percent units
- 8-value elliptical mode for leaves, eggs and blobs
- Random blob shapes in one click
- Adjustable preview width and height
- Shortest valid shorthand in the output
How border-radius is written
The border-radius property rounds the corners of any element’s box, including its background, border and shadow. It accepts one to four values, applied clockwise from the top left: top-left, top-right, bottom-right, bottom-left.
| CSS | Meaning |
|---|---|
| border-radius: 16px | All four corners 16px |
| border-radius: 16px 0 | Top-left and bottom-right 16px; the other two square |
| border-radius: 16px 8px 0 | Top-left 16px, top-right and bottom-left 8px, bottom-right 0 |
| border-radius: 4px 8px 16px 32px | Each corner set separately, clockwise |
| border-radius: 50% / 30% | Elliptical corners: horizontal radius / vertical radius |
The generator always prints the shortest form that gives the same shape.
Pixels versus percent
A pixel radius is a fixed curve, so it looks the same on small and large elements; that is what you want for cards, buttons and inputs. A percentage is measured against the element’s own size: the horizontal radius against its width and the vertical radius against its height. That is why border-radius: 50% turns a square into a circle but a rectangle into an ellipse.
Classic shapes
- Pill buttons: use a pixel radius at least half the element’s height. Many developers write a very large value such as 9999px so the shape stays a pill at any height.
- Circles and avatars: 50% on an element with equal width and height.
- Leaves: round two opposite corners and leave the others square, for example
90px 0. - Speech bubbles: round three corners and keep one sharp where the tail would be.
- Blobs: use eight percentage values with the slash syntax, such as
30% 70% 70% 30% / 30% 30% 70% 70%. Pairs that add up to 100% along each side keep the outline smooth.
When corners overlap
If two neighboring radii add up to more than the side they share, the browser scales all the radii down by the same factor until they fit. This is why a huge pixel value still produces a neat pill instead of a broken shape, and why an exaggerated value on one corner can make the others look smaller than you set them.
Tips
- For nested rounded boxes, make the inner radius equal to the outer radius minus the padding between them, so the curves look parallel.
- Images and videos inside a rounded container need
overflow: hiddenon the container, or a radius of their own, to be clipped. - Keep a small set of radii across a product, for example 8px for inputs, 16px for cards and a pill for tags.
Rounded corners shape shadows too. Pair this tool with the Box Shadow Generator or the Glassmorphism Generator to finish a card.
Frequently asked questions
How do I make a circle with CSS?
Give the element equal width and height and set border-radius: 50%. On a rectangle, 50% produces an ellipse instead.
How do I make a pill-shaped button?
Use a pixel radius of at least half the button’s height. A very large value such as 9999px works for any height, because the browser scales oversized radii down to fit.
What does the slash in border-radius mean?
Values before the slash are horizontal radii and values after it are vertical radii, which makes elliptical corners. It is how blob and egg shapes are made.
How do I round only one corner?
Untick Same value for all corners and set just that corner, or use a longhand property such as border-top-left-radius: 16px.
Why is my image not clipped by the rounded corners?
Children are not clipped automatically. Add overflow: hidden to the rounded container, or give the image the same border-radius.