Collapsed DIV borders using CSS3 box-shadow

This is a neat little trick I’ve been using some time now and I hope this will be of help to others too, especially to young developers. Suppose you have 3 divs that are stacking on top of each other and you want to give each one a border. Your first instinct would be to use something like ‘border: 3px solid #444;’. However, it will probably look like this:

Which isn’t very appealing… We do not want the bottom border of div A to pile up on the top border of div B, and B to C. That’s where box-shadow comes in! By playing around with it’s value, box-shadow will become the border itself. Which means you no longer need the ‘border’ property.




See the Pen Collapsible div borders using CSS3 box-shadow by Elmer Balbin (@elmzarnsi) on CodePen.27172

This is not to say there are no other solutions. There are, but I find this one the easiest 🙂

Icons made by Madebyoliver from is licensed by CC 3.0 BY
Elmer Balbin

Web developer from Bacolod, Steam Sale hunter, and casual DotA 2 player.

about me

Leave a comment


Give overflow-y:scroll; to .box and the scrollbar will overlaps with the “borders”.

It is good for tables which contents are small or without overflows though,

Get great deals on hotel rooms from all over the world BOOK NOW