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

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

about me

2
Leave a comment

avatar
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,

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