What units can I use for border radius?

Border radius accepts various CSS units including pixels (px), percentages (%), em, and rem. This tool generates pixel values, which are the most commonly used. Percentages are useful for creating circular shapes (50% creates a perfect circle on square elements).

Why do I need vendor prefixes?

Vendor prefixes (-webkit- and -moz-) ensure compatibility with older browsers. While modern browsers support the standard border-radius property, including prefixes ensures your rounded corners work across all browsers, including older versions of Safari, Chrome, and Firefox.

Can I create elliptical corners?

Yes! While this tool focuses on circular corners, CSS border-radius supports elliptical corners by specifying two values per corner (horizontal and vertical radius). For example: border-radius: 50px 30px creates an elliptical corner.

What's the maximum border radius value?

There's no technical maximum, but values larger than 50% of the element's smallest dimension will be clamped by the browser. For a 100px square, any radius over 50px will create a circle. This tool limits values to 100px for practical use.

Border Radius Generator

Customize HTML element corners effortlessly. Get instant CSS code to add rounded, smooth, or angular borders.

All Sides:

topLeft:

topRight:

bottomRight:

bottomLeft:

border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;

What is Border Radius?

Border radius is a CSS property that allows you to create rounded corners on HTML elements. By adjusting the border-radius values, you can transform sharp rectangular corners into smooth, rounded edges. This property accepts values for each corner individually (top-left, top-right, bottom-right, bottom-left) or a single value to apply to all corners uniformly. Border radius is essential for modern web design, creating softer, more approachable interfaces.

How to Use the Border Radius Generator

Use the "All Sides" slider to apply the same radius to all corners simultaneously, or adjust individual corner sliders for custom shapes. The preview box updates in real-time to show your changes. The generated CSS code includes vendor prefixes (-webkit- and -moz-) for maximum browser compatibility. Click "Copy Code" to copy the CSS to your clipboard and paste it directly into your stylesheet.

Creative Uses for Border Radius

Border radius is commonly used for buttons, cards, images, input fields, and containers. You can create pill-shaped buttons with large radius values, subtle rounded cards for better visual hierarchy, circular profile images by setting radius to 50%, or unique asymmetric shapes by varying individual corner values. Combining different radius values on each corner can create distinctive, modern design elements.

Border Radius Generator

What is Border Radius?

How to Use the Border Radius Generator

Creative Uses for Border Radius

Frequently Asked Questions