How to use the border radius generator
- In Corners mode, drag a slider for each corner, or tick Same for all to round them equally. Switch between px and %.
- In Organic shape mode, the four sliders move where the curves meet on each side, creating blob shapes for avatars, image masks and decorative backgrounds.
- Try 🎲 Random for inspiration, and preview on a square, wide or tall element.
- Copy the CSS.
How border-radius works
border-radius rounds an element's corners. One value rounds all four; four values go clockwise from the top left: top-left, top-right, bottom-right, bottom-left. Pixel values give the same curve whatever the element's size, which suits buttons and cards (8–16 px is common). Percentages are relative to the element's width and height, so 50% turns a square into a circle and a rectangle into an ellipse, and a pill-shaped button is easiest with a very large pixel value such as 999px.
The slash syntax sets horizontal and vertical radii separately: a b c d / e f g h. Each corner then becomes an elliptical arc. When the horizontal radii along an edge add up to 100%, the curves meet smoothly, which is how the organic mode creates fluid blobs from pure CSS, with no SVG required. Add a transition on border-radius to animate between shapes.
The generator runs in your browser and remembers your last shape.
How do I make a circle in CSS?
Give the element equal width and height and set border-radius: 50%.
Why does my image overflow the rounded corners?
Add overflow: hidden to the rounded container, or put the border-radius on the image itself.
Can each corner have a different radius?
Yes. Untick "Same for all" and set each slider separately.