Rounded corners with CSS
The border-radius property rounds the corners of an element. Soft corners make buttons, cards, images and input fields look friendlier and more modern. You can round all four corners equally, give each corner a different value, or even turn a square into a circle. This tool lets you see the shape as you adjust it and copies the shortest correct CSS.
How to use it
- Keep Same value for all corners ticked and move any slider to round every corner equally.
- Untick the option to set each corner separately, for example only the top corners for a tab or card header.
- Switch the unit to % to make the rounding relative to the element's size.
- Copy the CSS code.
The order of values
When four values are written, CSS reads them clockwise from the top-left:
border-radius: top-left top-right bottom-right bottom-left;
So border-radius: 20px 20px 0 0; rounds only the top two corners. A single value, such as border-radius: 12px;, applies to all four.
Useful shapes
| Shape | CSS |
|---|---|
| Gently rounded card | border-radius: 12px; |
| Pill-shaped button | border-radius: 9999px; |
| Circle (square element) | border-radius: 50%; |
| Ellipse (rectangle element) | border-radius: 50%; |
| Leaf shape | border-radius: 0 50%; |
Frequently asked questions
Why is my image not rounded?
If the image sits inside a rounded box, add overflow: hidden; to the box, or put the border-radius directly on the <img>.
Should I use px or %?
Use px for consistent rounding on elements of different sizes. Use % when you want the shape to scale, such as circles.
Does border-radius affect the clickable area?
Yes. Clicks on the cut-off corners of a rounded button do not count as clicks on the button.