Visually design border-radius for any shape. Control all corners individually, pick presets, and copy the CSS instantly.
The CSS Border Radius Generator lets you shape any element visually by adjusting all four corners independently using sliders or number inputs. You can lock all corners together for uniform rounding or switch to individual control for asymmetric and organic "blob" shapes, with a live preview updating in real time.
The tool outputs the shorthand border-radius value, the full CSS property declaration, and the closest Tailwind utility class — so you can use the result in any CSS framework. All calculations are done entirely in your browser with no data sent anywhere.
rounded-* class for a given pixel valueUse % when you want rounding to scale proportionally with the element's size — for example, 50% always creates a perfect circle on a square element regardless of its dimensions. Use px when you need a fixed visual radius that stays consistent even as the element resizes, such as a 8px card corner.
The tool averages all four corner values and finds the nearest value in Tailwind's predefined rounded-* scale (from rounded-none at 0px to rounded-full for circular). If you're using individual asymmetric corners, the Tailwind class is an approximation — you may need an arbitrary value like rounded-[24px_4px_24px_4px] instead.
The CSS shorthand follows clockwise order from the top-left: border-radius: top-left top-right bottom-right bottom-left. When two values are provided they apply to top-left/bottom-right and top-right/bottom-left pairs. The generator always outputs the most compact valid shorthand for the current corner values.