🔲

CSS Border Generator

Create and customize CSS3 border radius styles easily.

Border Controls

Border Radius

Top Left

10px

Top Right

10px

Bottom Left

10px

Bottom Right

10px

Link all corners

Border Style

Border Width

2px

Border Color

Background Color

Box Dimensions

Width

200px

Height

200px

Preview

CSS Code

border-radius: 10px;
border: 2px solid #3B82F6;
background-color: #FFFFFF;

Presets

About CSS Border Radius

What is Border Radius?

The CSS border-radius property allows you to round the corners of an element. You can specify different values for each corner, creating various shapes from slightly rounded corners to perfect circles.

Browser Support

The border-radius property is supported in all modern browsers: Chrome, Firefox, Safari, Edge, and Opera.

Syntax

You can specify one value for all corners, or up to four values for each corner in the order: top-left, top-right, bottom-right, bottom-left.

border-radius: 10px; /* All corners */
border-radius: 10px 20px 30px 40px; /* Each corner */

Tips

Use percentage values (like 50%) to create responsive rounded corners
Combine with overflow: hidden to crop content inside the rounded container
For perfect circles, make the element square and set border-radius to 50%