List of All CSS Border Style Values

This article is created to list all the possible values that can be used to define the value of following CSS properties:

All Values of Border Style

solid - used to set solid border
dashed - used to set dashed border
dotted - used to set dotted border
double - used to set double line border
ridge - used to set 3D ridged border
groove - used to set 3D grooved border
inset - used to set 3D inset border
outset - used to set 3D outset border
initial - used to set the default style
inherit - used to inherit the value from its parent
none - used to set no border
hidden - same as hidden border

The solid Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: solid;}
      p.two {border-style: solid; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 10px solid #ccc; padding: 12px; border-left: 10px solid chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The dashed Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: dashed;}
      p.two {border-style: dashed; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 10px dashed #ccc; padding: 12px; border-left: 10px dashed chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The dotted Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: dotted;}
      p.two {border-style: dotted; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 10px dotted #ccc; padding: 12px; border-left: 10px dotted chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The double Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: double;}
      p.two {border-style: double; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 10px double #ccc; padding: 12px; border-left: 10px double chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The ridge Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: ridge;}
      p.two {border-style: ridge; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 5px ridge #ccc; padding: 12px; border-left: 10px ridge chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The groove Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: groove;}
      p.two {border-style: groove; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 5px groove #ccc; padding: 12px; border-left: 10px groove chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The inset Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: inset;}
      p.two {border-style: inset; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 5px inset #ccc; padding: 12px; border-left: 10px inset chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The outset Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p.one {border-style: outset;}
      p.two {border-style: outset; border-width: 10px; border-color: crimson; padding: 12px;}
      p.three {border: 5px outset #ccc; padding: 12px; border-left: 10px outset chocolate;}
   </style>
</head>
<body>

   <p class="one">This is para one.</p>
   <p class="two">This is para two.</p>
   <p class="three">This is para three.</p>

</body>
</html>

Output

This is para one.

This is para two.

This is para three.

The initial Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 10px solid chocolate; padding: 12px; border-bottom-style: initial;}
   </style>
</head>
<body>

   <p>This is para one.</p>

</body>
</html>

Output

This is para one.

The inherit Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 10px solid coral; padding: 12px; border-top-style: inherit;}
   </style>
</head>
<body>

   <p>This is para one.</p>

</body>
</html>

Output

This is para one.

The none Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 10px solid crimson; padding: 12px; border-left-style: none;}
   </style>
</head>
<body>

   <p>This is para one.</p>

</body>
</html>

Output

This is para one.

The hidden Value Example

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p {border: 10px solid crimson; padding: 12px; border-right-style: hidden;}
   </style>
</head>
<body>

   <p>This is para one.</p>

</body>
</html>

Output

This is para one.

CSS Online Test

« Previous Tutorial Next Tutorial »