Border-radius generator

Adjust the rounding of each corner and copy the border-radius code. Turn on advanced mode to give each corner different horizontal and vertical radii and create organic shapes (blobs).

How border-radius works

border-radius accepts one to four values, applied clockwise starting at the top left: 10px rounds all corners equally; 10px 20px gives 10px to the top-left and bottom-right corners and 20px to the other two; and 10px 20px 30px 40px sets each one separately. There are also individual properties such as border-top-left-radius.

A slash sets different horizontal and vertical radii, turning each corner into a quarter of an ellipse: 50% / 60% 60% 40% 40% draws an egg. This is how the organic shapes or "blobs" so common in modern web design are made.

Circles and pills

For a circle use border-radius: 50% on a square box (if it is not square you get an ellipse). For a pill or a button with round ends, use a pixel value larger than half the height, such as 999px: the browser clamps it automatically and the shape does not distort when the width changes.

Rounded corners also clip the background and shadows, but not content that overflows the box: to clip an image, add overflow: hidden.