Visual sliders for every corner — copy your CSS instantly
CSS Border Radius Generator
border-radius: 12px;The CSS Border Radius Generator lets you visually craft rounded corners for any element. Drag independent sliders for top-left, top-right, bottom-right, and bottom-left — or link them all at once. Get the correct shorthand or longhand CSS, see a live preview with customizable colors, and copy your border-radius value with a single click. Tailwind class hints included.
When all four corners share the same value, border-radius accepts a single value (e.g. border-radius: 12px). When corners differ, it follows the order top-left, top-right, bottom-right, bottom-left — for example border-radius: 8px 16px 8px 0px.
Set all corners to a value larger than half the element's shortest dimension — typically 999px or 9999px. This ensures the browser clamps each corner to the maximum possible arc, creating a perfect pill shape regardless of the element size.
Shorthand (border-radius: 12px) sets all corners in one declaration and is the most concise option. Longhand uses four separate properties — border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius — which can be useful when only one corner needs to be overridden in a specific context.
Yes. When all four corners are equal, the tool shows the matching Tailwind utility — for example rounded-xl for 12px or rounded-full for pill-shaped corners. For non-standard values it shows an arbitrary-value class like [border-radius:20px] that you can drop straight into your Tailwind template.