CSS Border Radius Generator

The border-radius shorthand sets the four corners clockwise from the top left: top-left top-right bottom-right bottom-left. Missing values are copied from the opposite corner, the same way as for margin: with three values the bottom-left equals the top-right, with two values the pairs of opposite corners share a radius, and one value applies to all corners. The generator always writes the shortest form, so 12px 12px 12px 12px becomes 12px and 0 100% 0 100% becomes 0 100%.

Every corner is a quarter of an ellipse with a horizontal and a vertical radius. Values before the slash are the horizontal radii and values after it the vertical ones: 30% 70% 70% 30% / 30% 30% 70% 70%. This is how blobs, eggs and other organic shapes are made without SVG. Percentages refer to the width of the box for horizontal radii and to its height for vertical radii, so 50% gives a circle on a square and an ellipse on a rectangle.

When the radii of two neighbouring corners add up to more than the side they share, the browser scales all radii down by the same factor until they fit. That is why a very large value such as 999px produces a pill with perfectly round ends at any size, while 50% would turn the same box into an ellipse. The radius also clips the background and the box-shadow, but not the content: add overflow: hidden to clip images and children to the rounded shape.