Visualise and generate CSS border-radius in real time. Simple rounded corners or full elliptical control — copy the CSS instantly.
--radius: instead of inline
This visual border-radius generator lets you round the corners of any element and watch the result update live, then copy clean, ready-to-paste CSS — from a simple uniform radius to fully independent elliptical corners.
The CSS border-radius property is deceptively deep. A single value rounds all four corners equally, but the longhand form accepts up to eight numbers and an optional slash to give each corner its own horizontal and vertical radius, which is how organic "squircle" and blob shapes are made. Writing that by hand is fiddly and easy to get wrong. This tool turns it into a visual exercise: drag a slider or type per-corner values, resize the preview box, switch between pixels and percentages, and the exact CSS is generated for you. It is handy when you want to:
--radius CSS custom property for a design systemEverything runs in your browser with nothing uploaded. The generator also simplifies its output where it can — collapsing four equal corners back to a single value — so the CSS you copy stays as short as it would be if you had written it by hand.
border-radius CSS — enable the variable option for a reusable --radius token.Simple mode applies a single radius value to all four corners. Advanced mode lets you control each corner independently, including elliptical shapes with separate horizontal and vertical radii.
Set border-radius to 50% on a square element (equal width and height). The Circle preset does this automatically.
Use pixels for consistent corners regardless of element size — great for buttons and cards. Use percentages when corners should scale with the element, like circles or pills that adapt to any size.
Set a very large pixel radius such as 9999px (the Pill preset does this). Because the radius is capped at half the element's height, any value larger than that produces perfectly semicircular ends regardless of width.
The slash separates horizontal radii from vertical radii, like 50% 20% / 30% 40%. Values before the slash set each corner's horizontal radius and values after set the vertical radius, which is how elliptical and blob-like corners are created. Advanced mode writes this for you automatically.
The most common cause is a missing overflow: hidden on a parent, or child content (like an image) overflowing the rounded box. Make sure the element actually has a background or border to show the curve, and that nothing is painting over the corners.
Yes. border-radius, including the elliptical and per-corner longhand syntax, is supported in every modern browser without a vendor prefix. You no longer need -webkit- or -moz- prefixes for it.