CSS Property Value How to - border-style possible values

Question

We would like to know how to border-style possible values.

Answer


<html>
<head>
  <style>
.solid {border-style:solid; border-color:#000000; border-width:1px;}
.dotted {border-style:dotted; border-color:#999999; border-width:2px;}
.dashed {border-style:dashed; border-color:#666666; border-width:3px;}
.double {border-style:double;}
.groove {border-style:groove;}
.ridge {border-style:ridge;}
.inset {border-style:inset;}
.outset {border-style:outset;}
  </style><!--from   w  w  w  .  j  a  v a2 s  . co m-->
</head>
<body>
    <p class="solid">This is a paragraph with a <code>solid</code> border</p>
    <p class="dotted">This is a paragraph with a <code>dotted</code> border</p>
    <p class="dashed">This is a paragraph with a <code>dashed</code> border</p>
    <p class="double">This is a paragraph with a <code>double</code> border</p>
    <p class="groove">This is a paragraph with a <code>groove</code> border</p>
    <p class="ridge">This is a paragraph with a <code>ridge</code> border</p>
    <p class="inset">This is a paragraph with an <code>inset</code> border</p>
    <p class="outset">This is a paragraph with an <code>outset</code> border</p>
</body>
</html>

The code above is rendered as follows: