CSS Border Radius Generator
Generate CSS border-radius with live preview
Share:
border-radius: 16px;
16px
0200px
Presets
How to Use CSS Border Radius Generator
- 1Use the sliders to set the border radius for each corner.
- 2Toggle the link icon to apply the same value to all corners at once.
- 3See the live preview update in real time.
- 4Copy the CSS code using the Copy button.
About CSS Border Radius Generator
Generate CSS border-radius values with individual corner control. Link or unlink corners for uniform or asymmetric rounding. Includes a live preview showing exactly how your element will look. Copy the CSS code with one click.
Frequently Asked Questions
What is CSS border-radius?
border-radius rounds the corners of an element. A value of 50% on a square element creates a circle. Individual corners can have different values for asymmetric shapes.
Can I set different values for each corner?
Yes. The CSS shorthand border-radius accepts four values: top-left, top-right, bottom-right, bottom-left. This tool lets you control each corner independently.
How do I make a perfect circle?
Set border-radius to 50% on an element with equal width and height. This works for any size square element.