1. home
  2. Tutorials
  3. Tutorial
Edit

Border Styles

The border-style property is used to style an element with different types of border.

Example of Code

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <style>
  .Borders-all-Sides {
      padding: 20px;
      border-bottom-width: 4px;
      border-bottom-style: double;
      border-bottom-color: orange;
      }
  .Borders-all-Sides {
      padding: 5px;
      margin: 10px;
      text-align: center;
      border-color: orange;
      border-width: 4px;
      }
  .solid {
    border-style: solid;
  }
  .dotted {
    border-style: dotted;
  }
  .dashed {
    border-style: dashed;
  }
  .double {
    border-style: double;
  }
  .groove {
    border-style: groove;
  }
  .ridge {
    border-style: ridge;
  }
  .inset {
    border-style: inset;
  }
  .outset {
    border-style: outset;
  }
  .hidden {
    border-style: hidden;
  }
</style>
</head>
<body>
    <div class="solid Borders-all-Sides">This 'div' has a border style of 'solid'.</div>
    <div class="dotted Borders-all-Sides">This 'div' has a border style of 'dotted'.</div>
    <div class="dashed Borders-all-Sides">This 'div' has a border style of 'dashed'.</div>
    <div class="double Borders-all-Sides">This 'div' has a border style of 'double'.</div>
    <div class="groove Borders-all-Sides">This 'div' has a border style of 'groove'.</div>
    <div class="ridge Borders-all-Sides">This 'div' has a border style of 'ridge'.</div>
    <div class="inset Borders-all-Sides">This 'div' has a border style of 'inset'.</div>
    <div class="outset Borders-all-Sides">This 'div' has a border style of 'outset'.</div>
    <div class="hidden Borders-all-Sides">This 'div' has a border style of 'hidden'.</div>
</body>
</html>

Output

Example
This 'div' has a border style of 'solid'.
This 'div' has a border style of 'dotted'.
This 'div' has a border style of 'dashed'.
This 'div' has a border style of 'double'.
This 'div' has a border style of 'groove'.
This 'div' has a border style of 'ridge'.
This 'div' has a border style of 'inset'.
This 'div' has a border style of 'outset'.