6/17/21

CSS Tutorial : CSS Border Radius Property

Hey Friends, in the last tutorial we had seen the CSS Border Property. There are 4 attributes in CSS border property. We have already discussed the first 3 attributes (color, width, and style). If you haven’t read then read the previous one first then read this tutorial. Now we are going to discuss the CSS Border Radius property. So let’s Begin….

CSS Border Radius Property 

This CSS property is used to set the rounded corner of the Html elements. It defines the radius of the element. We can change all four corners of the box with different values. The Value of this property can be defined in percentage and length units. This CSS Property has four attributes. These are:- 

  1. Border-top-left-radius
  2. Border-top-right-radius
  3. Border-bottom-left-radius
  4. Border-bottom-right-radius

Let see an amazing example of it. 

Example:- 

<html>
<head>
    <title> CSS Border Radius Property </title>
    <style>
        *{
            margin30px;
        }
        body{
            displayflex;
        }
       .box{
           padding23px;
           height20%;
           width20%;
           border-stylesolid;
           border-radius23%;
       }
       #box1{
           background-colorburlywood;
       }
       #box2{
           background-colorcornflowerblue;
       }
       #box3{
           background-colordarkgray;
       }
       #box4{
           background-colordarkorchid;
       }
        
    </style>
</head>
<body>
  <p class="box" id="box1"> Box 1</p>
  <p class="box" id="box2"> Box 2</p>
  <p class="box" id="box3"> Box 3</p>
  <p class="box" id="box4"> Box 4</p>
</body>
</html>

Output:-

In this example, you saw how all the corners of the box got rounded. If the user want to corner only the left side of the box. Then you have to select the border-top-left-radius attribute. Now the below example will show you to change all the box corner with different values. 

Example:-

<html>
<head>
    <title> CSS Border Radius Property </title>
    <style>
        *{
            margin30px;
        }
        body{
            displayflex;
        }
       .box{
           padding23px;
           height20%;
           width20%;
           border-stylesolid;
       }
       #box1{
           background-colorburlywood;
           border-top-left-radius20px;
           border-top-right-radius30px;
           border-bottom-left-radius40px;
           border-bottom-right-radius50px;
       }
       #box2{
           background-colorcornflowerblue;
           border-top-left-radius5px;
           border-top-right-radius10px;
           border-bottom-left-radius15px;
           border-bottom-right-radius20px;
       }
       #box3{
           background-colordarkgray;
           border-top-left-radius56px;
           border-top-right-radius72px;
           border-bottom-left-radius33px;
           border-bottom-right-radius33px;
       }
       #box4{
           background-colordarkorchid;
           border-top-left-radius40px;
           border-top-right-radius35px;
           border-bottom-left-radius25px;
           border-bottom-right-radius15px;
       } 
    </style>
</head>
<body>
  <p class="box" id="box1"> Box 1</p>
  <p class="box" id="box2"> Box 2</p>
  <p class="box" id="box3"> Box 3</p>
  <p class="box" id="box4"> Box 4</p>
</body>
</html>

Output:-


People Also Read:- CSS Background Property

People Also Read:- CSS Selectors and Different types of Selectors

0 comments:

Post a Comment

Like us on facebook

blogger templatesblogger widgets

Follow on Twitter

Linkedin

Categories

Mad About Computer. Powered by Blogger.