CSS Rounded Corners

The border-radius property is used to add rounded corners to an element. It is one of the most widely used CSS3 properties for modernizing UI design.

Basic Standard Usage

You can provide a single value to apply the same radius to all four corners.

.box {
    border-radius: 15px;
}

Standard Radius

Elliptical Radius

Creating Circles

To create a perfect circle, the element must have an equal width and height (square), and the border-radius must be set to 50%.

50% Circle

Individual Corner Control

You can specify up to four values for different corners. The order is: top-left, top-right, bottom-right, bottom-left.

Mixed Corners

/* tl, tr, br, bl */
.custom-shape {
    border-radius: 50px 10px 50px 10px;
}

Tip: You can create complex organic shapes by using independent vertical and horizontal radii with a slash: border-radius: 50% / 20%;.

« Previous Lesson Next Lesson »