How To Create Multiple Borders Effect

Multiple borders can easily be achieved by nesting element with in the element and style them appropriately.  Like this

View Demo

<div class="outer">
   <div class="inner">
        
   </div>
</div>

.outer{
  border:15px solid green;
  display: inline-block;
}

.inner{
  width: 250px;
  height: 200px;
  background-color: coral;
  border:7.5px solid;
}

All we have to do is to give them their own borders. This method requires an extra HTML element. The border only need width and style to work. The border-color property is default to the color property of the element. But how it can be done while having a single HTML element.

Ways to achieved Multiple borders

• Using Outline

Outline goes around the element, if element already has a border than outline will wrap around the border. This wrapping behavior give multiple borders appearance.

.box-outlined{
  border: 7.5px solid;
  outline: 15px solid chocolate;
}

Some thing to note about outline is that we can’t just say that I want outline on the top as it is possible with borders. Outline is applied on the all sides.

• Using Box Shadow

More than one box shadow can be applied to an element if they are separated by comma. To get multiple borders we can set a spread radius which accepts positive and negative integers (to scale big or small based on the value). In addition there should no blur with zero offset vertically and horizontally.

.box-shadowed {
    box-shadow: 0 0 0 7px black, 0 0 0 15px chocolate;
    cursor: pointer;
}

Some Caveats

• First of all, outline and box shadow are not the part of box model, so they won’t affect the elements around.
• In order to space them well, extra padding will be required.
• Mouse events live hover or click aren’t capture on outline and box shadows. To test it out, I added cursor pointer to the last code snippet. One way to fix it is to add inset to the box-shadow property.

Conclusion

That’s all I have for this tutorial. Don’t forget to leave your comments and tell me how much did you liked this.