ZenovayTools

CSS Border Radius Generator

Create custom border radius values with visual controls. Link or unlink corners for quick adjustment.

Corner Radius

12px
12px
12px
12px
CSS
border-radius: 12px;

How to Use CSS Border Radius Generator

  1. 1Adjust the border-radius slider for each corner of the preview box.
  2. 2Link all corners together for uniform rounding, or unlink for individual control.
  3. 3Preview the border-radius effect in real time.
  4. 4Copy the generated CSS border-radius code.
Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

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.
Can I use this tool on my phone?▾
Yes, the border radius generator works in any modern mobile browser. Adjust corner values with sliders and copy the CSS on any device.
Does the generated CSS work with all browsers?▾
Yes. The border-radius property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed.
Can I use the generated CSS with Tailwind?▾
Yes. Tailwind has built-in border-radius utilities like rounded-lg and rounded-full. For custom values, use the arbitrary value syntax like rounded-[12px_24px_12px_24px] or paste the CSS into a custom class.