Border Radius Generator
Round corners visually, including 8-value elliptical shapes.
What is a border radius generator?
The CSS border-radius property rounds the corners of an element. A small radius softens buttons and cards, a large one turns a square into a circle, and different values on each corner can create pills, tabs, leaf shapes and organic blobs. This generator shows the shape as you adjust it and writes the shortest correct CSS for you.
How to use it
- Choose pixels or percent as the unit.
- Keep Link all corners ticked to round every corner equally, or untick it to set each corner on its own.
- For advanced shapes, tick Elliptical corners. Each corner then has a horizontal and a vertical radius.
- Change the preview width and height to match your element.
- Press Copy CSS. Use Random blob for an organic shape and Reset to start again.
Features
- Linked or individual corners: top left, top right, bottom right and bottom left.
- Pixels or percent. Percent values scale with the element, so 50% on a square makes a circle.
- Elliptical 8-value syntax, written as four horizontal values, a slash and four vertical values.
- Short output: repeated values are collapsed, so equal corners give one value such as 24px.
- Adjustable preview size to see how the radius looks on wide or tall boxes.
Understanding the syntax
With four values the order goes clockwise from the top left: top left, top right, bottom right, bottom left. Two values set the top left and bottom right corners first, then the top right and bottom left. With the slash syntax, for example 30% 70% 70% 30% / 30% 30% 70% 70%, the values before the slash set how far each curve reaches along the horizontal edges and the values after it set how far it reaches along the vertical edges. That is how designers make the soft blob shapes you see behind photos and illustrations.
Tips
Use one or two radius sizes across a whole site for a consistent look, for example 8px for buttons and 16px for cards. When an element with rounded corners holds an image, add overflow: hidden so the image follows the curve. If the radius values on one side add up to more than the element size, browsers scale them down, so very large values simply produce the roundest possible shape.
Matching radius in nested elements
When a rounded card contains a rounded button or image with some padding around it, the inner radius should be smaller than the outer one. A good rule is inner radius equals outer radius minus the padding. For example, a card with a 20px radius and 8px padding looks best with a 12px radius on the element inside.
Frequently asked questions
How do I make a perfect circle?
Set the preview width and height to the same size, choose percent and set all corners to 50%. On a rectangle the same setting gives an ellipse.
What does the slash in border-radius mean?
Values before the slash are the horizontal radii of the four corners and values after it are the vertical radii. Different values make elliptical corners.
Should I use px or percent?
Pixels keep the same curve on any size of element, which suits buttons and cards. Percent scales with the element, which suits circles, pills and blob shapes.