CSS border Property

CSS border Property


CSS border Property
CSS border property allows a change the width, color and style of an element’s border.
There are various properties in css border which are mentioned down below with the possible values to them - 
Now will see some examples of element borders -
Syntax -
border: border-width border-style border-color 
Border Property
==============
border-width   :- thin,thick,medium, in px
 
border-style   :- dotted, solid, dashed,
Inset,outset,ridge,grove
 
border-color   :- Any color
 
border-radius  :- in pX   // in css3
border-image     in css3
Now we will see an Example -
Example - 
<!DOCTYPE html>
<html lang="en">
    <style type="text/css">
p.one{
    border-style: dotted;
}
p.two{
    border-style: dashed;}
p.three{ border-style: solid;}
p.four{ border-style: double;}
p.five{ border-style: groove;}
p.six{ border-style: ridge;}
p.seven{ border-style: inset;}
p.eight{ border-style: outset;}
p.nine{ border-style: none;}
p.ten{ border-style: hidden;}
        </style>
<link rel="stylesheet" href="sample.css">

<body>
    <h1 class="fruit" style="color:black" >This is first Heading
    </h1>
    <p class="one">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="two">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="three">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="four">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="five">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="six">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="seven">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="eight">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="nine">
this is an apple and an apple a day keeps doctor away
  </p>
    <p class="ten">
this is an apple and an apple a day keeps doctor away
  </p>
   
</body>
</html>
Output -