Border Radius Generator
Craft CSS border-radius shapes visually and copy the code.
Recommended next steps
Related tools
Convert colors between HEX, RGB, and HSL, and check WCAG contrast.
Test a regular expression against text and see matches and capture groups.
Encode or decode text to and from base64, with a URL-safe variant.
Frequently asked questions
Apply the border-radius property to an element. A single value like border-radius: 12px; rounds all four corners equally. Drag the sliders here, watch the live preview, and copy the generated declaration straight into your stylesheet.
The slash separates horizontal radii from vertical radii, producing elliptical corners instead of circular ones. The form is border-radius: h-tl h-tr h-br h-bl / v-tl v-tr v-br v-bl. Turn on "Elliptical corners" to set each axis independently and the tool writes the slash syntax for you.
Pixels give a fixed corner radius regardless of element size, which is best for buttons and cards. Percentages are relative to the element's dimensions — 50% on a square turns it into a circle and is handy for pills and avatars that need to scale. Switch units at the top of the tool.
No. The generator runs entirely in your browser. The preview is rendered locally with plain CSS and nothing you type is sent to a server or stored.
Last updated 2026-06-23.