CSS Border Radius

The CSS border-radius property is used to make the corners of an HTML element rounded.

By default, most rectangular elements have sharp corners. With border-radius, you can create slightly rounded corners, highly rounded cards, pill-shaped elements, or even circles.

Basic Syntax

selector {
    border-radius: value;
}

Border Radius Diagram

Simple Explanation

Example 1: Small Rounded Corners

A value of 10px creates slightly rounded corners.

.box {
    background-color: lightblue;
    border: 3px solid blue;
    border-radius: 10px;
    padding: 25px;
}

Output

Example 2: Larger Rounded Corners

Increasing the value creates more rounded corners.

.box {
    background-color: lightgreen;
    border: 3px solid green;
    border-radius: 30px;
    padding: 25px;
}

Output

Example 3: Pill Shape

A large border-radius value can be used to create pill-shaped buttons or labels.

.button {
    background-color: lightyellow;
    border: 3px solid orange;
    border-radius: 50px;
    padding: 15px 35px;
}

Output

Example 4: Circle

When an element has equal width and height, border-radius: 50% can turn it into a circle.

.circle {
    width: 150px;
    height: 150px;
    background-color: #e9d5ff;
    border: 3px solid purple;
    border-radius: 50%;
}

Output

Example 5: Individual Corners

CSS also allows you to control each corner separately.

.box {
    background-color: #d1fae5;

    border-top-left-radius: 30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 5px;

    border: 3px solid #047857;
    padding: 25px;
}

Output

Individual Border Radius Properties

Common Border Radius Values