CSS Border Radius Generator

Generate CSS border-radius properties visually with individual corner control. Customize shape, size, colors, and copy ready-to-use CSS code.

Presets

Link all corners

Unit

All Corners16px

Box Width

Box Height

Border Width

Background

#ffffff

Box Color

#4f46e5

CSS Output

border-radius: 16px;

All border-radius generation happens in your browser. No data is sent to any server.

How to Use This Tool

1
Adjust border radius
Use the slider to set the border-radius value for all corners at once, or unlink corners for individual control.
2
Try presets
Use preset buttons like Rounded, Pill, Circle, Leaf, or Drop to start with common shapes.
3
Customize appearance
Change the box size, colors, border width, and CSS unit (px, %, rem, em) to match your design.
4
Copy the CSS
Click "Copy" to copy the generated border-radius CSS property to your clipboard.

What is CSS border-radius?: CSS border-radius rounds the corners of an element. You can set all four corners uniformly or each corner individually using shorthand values.
What units can I use?: You can use px (pixels), % (percentage), rem (root em), or em. Percentage values are relative to the element dimensions—50% creates a circle on a square element.
How do I make a perfect circle?: Set border-radius to 50% on a square element (equal width and height). The "Circle" preset does this automatically.
Is my data secure?: Yes. All generation happens entirely in your browser using JavaScript. No data is sent to any server.