Categories
Opinions

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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.