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.

HTML

CSS

Output

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 www.flaticon.com is licensed by CC 3.0 BY
Elmer Balbin

Full-stack developer from Bacolod, Google Local Guide, Agoda affiliate and casual DotA 2 player.

Buy me a burgerBuy me a burger

2
Leave a comment

avatar
newest oldest
Fredy-san
Padawan
Fredy-san

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,