This free browser-based tool lets you create rounded corners visually and copy the CSS instantly. Adjust all four corners together or set each corner's radius independently, then fine-tune the border width, color, style, and background while watching a live preview update in real time. The CSS border-radius property controls how much an element's corners are rounded, from subtle softening to full circles and pills. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.

Frequently Asked Questions

What does the CSS border-radius property do?

border-radius rounds the outer corners of an element's border box. You can set one value to round all four corners equally, or up to four values to control the top-left, top-right, bottom-right, and bottom-left corners individually.

How do I make a perfect circle with border-radius?

Set border-radius to 50% on an element that has equal width and height. If the width and height differ, 50% produces an ellipse instead of a circle.

Can border-radius use pixels and percentages?

Yes. Pixel values create a fixed corner radius, while percentage values are relative to the element's dimensions and scale as the box resizes. This generator outputs pixel values from its sliders.

Is border-radius supported in all browsers?

Yes. border-radius is a stable CSS3 property supported by all modern browsers, including Chrome, Firefox, Safari, and Edge, with no vendor prefixes needed for current versions.