How to round corners in CSS
- Drag All corners or type a value. Untick Same for every corner to set each corner on its own, and pick px or %.
- Tick Elliptical corners to give each corner a separate width and height, which is how blob and leaf shapes are made. Change the preview size to match your element.
- Press Copy CSS. The code uses the shortest form of border-radius that gives the same shape.
Why corners sometimes don’t round as much as you asked
When the radii on one side add up to more than that side’s length, the browser scales all of them down by the same factor until they fit. That’s why 999px gives a neat pill instead of an error, and why a 200px radius on a 100px tall box looks the same as 50px. If a shape looks off, check the element’s actual size.
Rounding images and borders
border-radius clips an element’s background and border, and also an image’s own content when it’s set on the img element. If the image sits inside a rounded wrapper, add overflow: hidden to the wrapper so its corners clip the picture. To round the corners of an image file itself, for a profile picture or an app icon, use the round corners tool instead.