CSS Border Radius

From CSS3 onwards, we can easily provide rounded corners to any element using the border-radius property.

p {
    background-color:orange;
    padding:10px;
    /* setting border radius */
    border-radius: 4px;
}

Live Example →

Syntax of border:radius

Using the property border-radius is pretty straight forward, all you have to do is specify the curvature in terms of px, em or % for rounding the corners.

Syntax:

border-radius: top-left top-right bottom-right bottom-left

In the above code, top-left will be the value for rounding the top-left corner, similarly top-right will be the value for top-right corner and so on.

We can skip any value, or specify the value 0 for it, to not round that particular corner. And we can also, set different curvatures for all the corners as well.

p {
    background-color:orange;
    padding:10px;
    /* setting border radius */
    border-radius: 4px 8px 12px 16px;
}

Live Example →