CSS border-style Property

CSS border-style Property


CSS border-style Property
The border-style property sets the style of an element's border. 
Syntax -
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
 
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">
<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>

<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 -