CSS Border Radius Generator
Create custom border radius values with visual controls. Link or unlink corners for quick adjustment.
5 of 5 uses remaining today
Corner Radius
12px
12px
12px
12px
CSS
border-radius: 12px;
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.
CSS Grid GeneratorBuild CSS Grid layouts with a visual editor. Define columns, rows, gaps, and span cells across areas.
Frequently Asked Questions
How does CSS border-radius work?▾
The border-radius property rounds the corners of an element. You can set a single value for all corners or specify each corner individually: top-left, top-right, bottom-right, bottom-left.
Can I set different values for each corner?▾
Yes. Click the link icon to unlink corners, then adjust each corner independently. This lets you create asymmetric shapes like speech bubbles or tabs.
What units does border-radius support?▾
Border-radius supports any CSS length unit. This tool uses pixels (px), but you can also use percentages (%) — 50% creates a perfect circle on a square element.
How do I make a perfect circle?▾
Set all four corner values to 50% (or half the element's width/height in pixels). The element must be square for a true circle.