10 Must Know CSS Border Styles with Examples

Most of us are aware of just a few CSS Border style options - solid, dotted or dashed. But do you know there are more, and some of them are pretty awesome!

Let's take a look at 10 such must-know CSS border styles with examples.

Example 1: Dotted

<style>
      .border-dotted {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: dotted;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-dotted">CSS Border Style Dotted</div>

Example 2: Dashed

<style>
      .border-dashed {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: dashed;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-dashed">CSS Border Style Dashed</div>

Example 3: Solid

<style>
      .border-solid {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: solid;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-dashed">CSS Border Style Solid</div>

Example 4: Double

<style>
      .border-double {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: solid;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-double">CSS Border Style Double</div>

Example 5: Groove

<style>
      .border-groove {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: groove;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-groove">CSS Border Style Groove</div>

Example 6: Ridge

<style>
      .border-ridge {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: ridge;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-ridge">CSS Border Style Ridge</div>

Example 7: Inset

<style>
      .border-inset {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: inset;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-inset">CSS Border Style Inset</div>

Example 8: Outset

<style>
      .border-outset {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: outset;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-outset">CSS Border Style Outset</div>

Example 9: Hidden

<style>
      .border-hidden {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: ridge;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-hidden">CSS Border Style Hidden</div>

Example 10: None

<style>
      .border-none {
        background-color: lightgrey;
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px;
        border-width: 5px; 
        border-style: none;
        border-color: red;
        border-radius: 10px;
      }
</style>
    
  <div class="border-none">CSS Border Style None</div>

Facing issues? Have Questions? Post them here! I am happy to answer!