CSS Border Radius Generator
Design CSS border-radius values visually with individual corner control, live preview, and one-click copy of the CSS code.
CSS Border Radius Generator creates border-radius CSS values visually, with independent control over each corner (top left, top right, bottom right, bottom left) in px or %, a live preview box, ready-made presets (Sharp, Subtle, Rounded, Pill, Circle, Leaf), and one-click copy of the generated CSS. Runs entirely in your browser — no upload, no signup, no account. Made by FreeToolHub.
Corner Radius
Preview
CSS Output
border-radius: 16px;
Quick Presets
Create CSS border-radius values for cards, buttons, avatars, and UI elements — link all corners or set each one individually.
Frequently Asked Questions
What is CSS border-radius?
The border-radius CSS property rounds the corners of an element's outer border edge. You can set one radius for all four corners or a different radius for each corner individually, using px, %, or other length units.
Can I set each corner separately?
Yes. Turn off "Link all corners" to reveal four independent sliders — top left, top right, bottom right, bottom left — so you can shape asymmetric corners like a leaf, tab, or speech-bubble shape.
What's the difference between px and % units?
px sets a fixed radius in pixels, so the corner stays the same size regardless of the element's dimensions. % sets the radius as a percentage of the element's own width and height, so corners scale with the box — 50% on all corners turns a square into a circle and a rectangle into a pill.
How do I create a pill or circle shape?
Set all four corners to 50% (or use the Pill or Circle preset). On a wide, short box this produces a pill/stadium shape; on a square box it produces a perfect circle.
Can I copy the generated CSS?
Yes. Click Copy CSS to copy the exact border-radius declaration to your clipboard, ready to paste into your stylesheet.
Does this tool store my settings or cost anything?
No. Everything runs locally in your browser; nothing is saved, uploaded, or sent to a server. The CSS Border Radius Generator is completely free with no sign-up, no account, and no limits.