CSS Borders

CSS Borders


CSS Borders
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 - 
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 will see some examples of element borders -
Now we will see the properties In details -
CSS border Style property
The border-style property sets the style of an element's border. 
This property can have from one to four values (for every side of the element one value.)
The various values of the border-style property are mentioned down below - 
The following are the representations of the border-style property value.
Now we will see examples - 
Example - 
<!DOCTYPE html>
<html lang="en">
<head>
    <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">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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 -