BOX MODEL BORDER PROPERTY IN CSS #2(CSS Tutorial #9)

We studied about BoxModel Border Property yesterdayand let us take the concept further.

So it is just another way to define the border property seperately.
we can define :
border-width , border-color , border-style , border-radius seperately.

So let us look the code for the same.

Step 1 ) Create a Html layout as usual.

Step 2 ) Create the following para's inside the body.

Screenshot from 2020-10-31 19-40-43.png

Step 3 ) Create the style tag and write following code inside it.

Screenshot from 2020-10-31 19-40-38.png

Step 4 ) Run the file with any browser to see the result.

Screenshot from 2020-10-31 19-41-08.png

Full Code :

   {
      <!DOCTYPLE HTML>  
  <html>
 <head>
<meta charset="utf-8">
    <title>DIV AND SPAN</title>
  <style>
    .bluebox{
        color: floralwhite;
        height: auto;
        background-color: #3B5998;
        width: auto;
        text-align: center;
        text-decoration: underline;
        padding: 16px; 
        border: 10px #613C59 ridge;
    } 
       .boxliliput{
        color: palegreen; 
        height: auto;
        background-color: #232A34;
        width: auto;
        padding: 25px 10px;
        border-width: 10px 7px;
           border-color: #96B8A8;
           border-style: ridge;
           border-radius: 20px;
        
    } 
        .brownbox{
        color: black;
        height: auto;
        width: auto;
        padding: 10px 20px 15px 12em;
        background-color:  #B49569;
            border-width: 10px;
            border-color: #4B5965;
            border-style: groove;
</style>
</head>
<body>
    <div class="bluebox">
        <p>  <b><i> FAkEbOOk</i> </b>    </p>
    </div> <br/>
<div class="boxliliput">
<p> <b>DESCRITION :</b>    </p> 
    <p> facebook to sab use karte ,</p>
    </div><br/>
    <div class="brownbox">
    <p>Alread a Member than what are you doing here....!</p>
    </div>


 </body>
 </html>

   }

So you see the difference in the second div that is because of the border-radius property that defines the radius for borders of our div.

Ask Your doubts below in the comments below.

Thank You

Link For Previous Tutorials

Sort Order:

Trending

[-]

sajannair · 4 years ago ·

Hmm Nice initiative to start a tutorial :)

0.00 BLURT

$0.00

kamranrkploy · 4 years ago ·

Thanks alot for appreciation. I am also running the Javascript tutorials. You can follow and learn both.

blurtcurator · 4 years ago ·

Congratulations! This post has been upvoted by the @blurtcurator communal account,
You can request a vote every 12 hours from the #getupvote channel in the official Blurt Discord.Don't wait to join ,lots of good stuff happening there.

michelangelo3 · 4 years ago ·

Run the file with any browser to see the result.

Good tutorial with a nice example, w3schools.com is another way to try it out.

^{Screenshot w3schools.com}

Yes you are right , one can write on w3school as well and it will work fine.

5.90 BLURT

1 votes$0.02