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

"+y+""}else{if(A==5){c+='
  • '+w+""+y+"
  • "}else{if(A==6){c+='
  • "+w+'
    '+u+""+y+"
  • "}else{c+='
  • "+w+"
  • "}}}}}s.innerHTML=c+=""+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]); //]]>

    0 comments:

    Post a Comment

    Follow on Twitter

    Linkedin

    Categories

    Mad About Computer. Powered by Blogger.
    This site is in no way affiliated with or endorsed by specified business. It exists as a compendium of supporting information intended for informational purposes only. If you want to buy this website, please don't hesitate to contact us via e-mail: "d e n a c c 9 7 7 (at) g m a i l (dot) c o m" (delete spaces) or you can find and buy it on Afternic domain auctions.