How to style rounded border property in CSS?

Rounded border in CSS

When you develop your web page, there may come many instances when there is need to insert border around your content, in fact rounded border corner around your content. To achieve rounded border, you can use border-radius property of CSS3. This property defines the shape of the border corner.

There are following border corner values which can be used in creating rounded border corners.

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-radius

Border-top-left-radius

The border-top-left-radius allows you to modify top left corner of your border and allows you to make it round. Let us write a code for border-top-left-radius.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded border property</title>
    <style>
    div.round{
        border:2px solid green;
        border-top-left-radius:15px;
        margin:10px;
        height:200px;
        width:200px;
    }
    </style>
</head>
<body>
    <h3>Border top left radius example</h3>
    <div class="round">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>
</body>
</html>
border-top-left-radius, www.programmingtutorial.in

Border-top-right-radius

The border-top-right-radius allows you to modify top right corner of your border and allows you to make it round. Let us write a code for border-top-right-radius.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded border property</title>
    <style>
    div.round{
        border:2px solid green;
        border-top-right-radius:15px;
        margin:10px;
        height:200px;
        width:200px;
    }
    </style>
</head>
<body>
    <h3>Border top right radius example</h3>
    <div class="round">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>
</body>
</html>
border-top-right-radius, www.programmingtutorial.in

You may also like to read:

How to set an opacity and transparency in CSS?

Border-bottom-left-radius and border-bottom-right-radius

The border-bottom-left-radius and border-bottom-right-radius also work in the similar way as border-top-left-radius works and allow you to modify bottom left and bottom right corner of your border to make it round. Let us write a code for border-bottom-left-radius and border-bottom-right-radius.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded border property</title>
    <style>
        .container{
            border:3px solid red;
            height:420px;
            width:420px;
            display:inline-block;
        }
    div#bottomleft{
        border:2px solid green;
        border-bottom-left-radius:15px;
        margin:10px;
        height:200px;
        width:200px;
    }
    div#bottomright{
        border:2px solid green;
        border-bottom-right-radius:15px;
        margin:10px;
        height:200px;
        width:200px;
    }
    </style>
</head>
<body>
<h4>Border bottom left and bottom right radius example</h4>
    <div class="container" id="bottomleft">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>   
    <div class="container" id="bottomright">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
 </div>
</body>
</html>
border-bottom-left-radius and border-bottom-right-radius

Border-radius property in CSS

The border-radius property is the shorthand property of border-top-left-radius, border-top-right-radius, border-bottom-left-radius and border-bottom-right-radius properties.

The border-radius property can have one to four values which are elaborated below:

One-value border-radius

In this property, the single value applies to all four corners of border.

Two-value border-radius

In this property, the first value applies to top-left corner and bottom-right corner.

Three-value border-radius

The first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner.

Four value border-radius

The first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner.

Let us now write border-radius property code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rounded border property</title>
    <style>
        .container{
            border:3px solid red;
            height:420px;
            width:420px;
            display:inline-block;
        }
        div#onevalue{
        border:2px solid green;
        border-radius:15px;
        margin:10px;
        height:200px;
        width:200px;
    }
    div#twovalue{
        border:2px solid rgb(12, 23, 180);
        border-radius:10px 40px;
        margin:10px;
        height:200px;
        width:200px;
    }
    div#threevalue{
        border:2px solid rgb(196, 10, 87);
        border-radius:10px 50px 30px;
        margin:10px;
        height:200px;
        width:200px;
    }
    div#fourvalue{
        border:2px solid rgb(211, 8, 8);
        border-radius:10px 20px 30px 40px;
        margin:10px;
        height:200px;
        width:200px;
    }
    h3{
        margin-left:400px;
    }
    </style>
</head>
<body>
    
        <h3>Border radius example</h3>
    <div class="container" id="onevalue">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>
    
    <div class="container" id="twovalue">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>
    <div class="container" id="threevalue">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>
    <div class="container" id="fourvalue">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi delectus, a molestiae cupiditate quod dicta totam dolores hic explicabo illum quaerat nobis magnam, magni obcaecati incidunt dolore. Consequatur id magni totam recusandae quam placeat. Odio ad dolorem quos dolor eum!
    </div>
</body>
</html>
Border-radius property in CSS, www.programmingtutorial.in

Note: To practice these codes, just copy codes and type it in notepad and then open with browser.