⬭Border Radius Generator

About this tool

Drag the sliders to round all four corners together, or untick Link corners to set each one separately. Switch between pixels and percentages, and turn on elliptical corners to set separate horizontal and vertical radii. Presets give you a rounded rectangle, pill, circle, leaf, speech bubble, organic blob and egg. The preview and the shortest equivalent border-radius value update as you go.

How border-radius works

border-radius rounds the corners of an element. One value rounds all four. Four values go clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Two values pair opposite corners, and three values share the second value between top-right and bottom-left. The tool always writes the shortest form that means the same thing. Percentages are relative to the element's own size, so 50% turns a square into a circle and a rectangle into an ellipse. A very large pixel value such as 999px gives a pill with fully round ends at any width, because browsers scale oversized radii down to fit. Each corner can also be elliptical, with a horizontal and a vertical radius written either side of a slash, such as 30% 70% 70% 30% / 30% 30% 70% 70%. That is how organic blob shapes are made, and animating between two blobs gives a gentle morphing effect. The CSS button generator, the box-shadow generator and the clip-path generator work well alongside it. px vs rem vs em: what each unit is relative to, and which to use where explains the units.

Frequently asked questions