facebook-squared twitter-squared rss-squared gplus-squared

Monday

23

May 2016

0

COMMENTS

How To Create Multiple Borders Effect

Written by on 23 May 2016

How to create multiple borders effect using css outline and box shadow

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

%d bloggers like this: