Web & SEO

Border Radius Generator — Free 2026

Visually adjust CSS border-radius for each corner with live preview. Link corners or set them independently, then copy the CSS.

Link All Corners

Top Left: 20px

Top Right: 20px

Bottom Right: 20px

Bottom Left: 20px

Live Preview

Generated CSS

border-radius: 20px;

CSS Property

How It Works

Adjust corner values
Link corners if desired
Copy the CSS

Understanding CSS Border Radius

The CSS border-radius property is one of the most frequently used styling properties in web development. It rounds the corners of any element, transforming sharp rectangles into softer, more modern shapes. From subtle corner rounding on buttons and cards to creating perfect circles for avatars, border-radius is fundamental to contemporary web design.

Shorthand vs Individual Properties

You can set all four corners at once with the shorthand border-radius: 10px or specify each individually: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. The shorthand accepts 1-4 values in clockwise order starting from top-left. Two values means top-left/bottom-right and top-right/bottom-left are paired.

Creating Organic Shapes

By setting different values for each corner, you can create organic, blob-like shapes that add visual interest to backgrounds and decorative elements. Large values on opposite corners (e.g., border-radius: 60% 0 60% 0) create a leaf-like shape. Combining border-radius with CSS gradients and transforms enables rich visual effects without images. For more advanced shadow effects, try our box shadow generator, or create smooth color transitions with the gradient generator.

Performance Considerations

Border-radius is hardware-accelerated in all modern browsers and has negligible performance impact. It can be safely used on animated elements without causing layout shifts or jank. However, combining border-radius with box-shadow on many elements simultaneously may affect rendering performance on lower-end devices, so test on target hardware for complex UIs.

Frequently Asked Questions

What is CSS border-radius?

CSS border-radius rounds the corners of an element's outer border edge. You can set a single value for all corners or specify each corner individually. Values can be in pixels, percentages, or other CSS length units.

How do I make a perfect circle with CSS?

Set border-radius to 50% on a square element (equal width and height). This creates a perfect circle. For an oval, apply 50% to a rectangular element.

Can I set different values for each corner?

Yes. The border-radius shorthand accepts four values in clockwise order: top-left, top-right, bottom-right, bottom-left. For example, border-radius: 10px 20px 30px 40px sets each corner differently.

What is the maximum border-radius value?

There is no strict maximum, but values beyond 50% of the element's width or height will not increase the roundness further. A value of 50% on all corners of a square creates a perfect circle. Values above 9999px are effectively treated as fully rounded on that corner.