CSS border-radius Property

CSS border-radius property sets the corner radius for element.

border-radius for the four corners can be specified in different ways. We shall go through each of them with examples.

border-radius with four values

</>
Copy
border-radius: 5px 25px 45px 65px;

where the order of corner radii is top-left, top-right, bottom-right, and bottom-left respectively, as shown in the following.

</>
Copy
border-radius: 5px        25px       45px          65px;
             /* top-left  top-right  bottom-right  bottom-left */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            background: #ffaa54;
            width: 200px;
            height: 200px;
            border-radius: 5px 25px 45px 65px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

If border is specified , then the border also gets the radius applied.

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            background: #ffaa54;
            width: 200px;
            height: 200px;
            border: 5px solid;
            border-radius: 5px 25px 45px 65px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-radius with three values

</>
Copy
border-radius: 5px 25px 45px;

where the order of corners is top-left, top-right, and bottom-right respectively. For bottom-left, the value for top-right is considered, as shown in the following.

</>
Copy
border-radius: 5px        25px       45px;
             /* top-left  top-right  bottom-right   */
            /*            bottom-left               */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            background: #ffaa54;
            width: 200px;
            height: 200px;
            border-radius: 5px 25px 45px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-radius with two values

</>
Copy
border-radius: 15px 55px;

where the first value is for top-left, and bottom-right; and the second value is for top-right, and bottom-left respectively, as shown in the following.

</>
Copy
border-radius: 15px            55px;
            /* top-left        top-right     */
            /* bottom-right    bottom-left   */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            background: #ffaa54;
            width: 200px;
            height: 200px;
            border-radius: 15px 55px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

border-radius with one value

</>
Copy
border-radius: 25px;

where the specified value is set as radii for all corners: top-left, top-right, bottom-right, and bottom-left, as shown in the following.

</>
Copy
border-radius: 25px;
            /* top-left         */
            /* top-right        */
            /* bottom-right     */
            /* bottom-left      */

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            background: #ffaa54;
            width: 200px;
            height: 200px;
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

Two border-radius values for one corner

We can also specify two radius values for a corner. As a result, we have an angularly asymmetric corner.

</>
Copy
border-radius: 25px / 50px;

Example

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        #div1 {
            background: #ffaa54;
            width: 200px;
            height: 200px;
            border-radius: 25px / 50px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about border-radius property, and how to use this property for HTML Elements, with examples.