codescracker
css

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

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



© Copyright 2021. All Rights Reserved.

CodesCracker