Bye borders, hello there box-shadow!
Borders are annoying. Learn why, and how you can use box-shadows instead!
I have spent so many hours fighting with borders. I'm not going to say I hate them, but if I had a time machine, and I could travel back in time to kill either the border spec or Baby Hitler, I might would have to have a real long talk with Håkon Weum Lie.
Kidding aside, borders can be very cumbersome when adding them in CSS. They take up visual space, they affect the layout, and there are several things you can't do with them.
What's the beef with borders?
Borders can be fine for lots of tasks. If you have the same border width in all states, borders probably work fine. If you have changing border width on hover, for example, you could still use an outline - as long as you don't have rounded borders. But if you need those too, you're out of luck.
Luckily, you don't need to use borders anymore. There's another property, albeit with a really funky syntax, that can solve all of those border woes in one fellow swoop.
A quick introduction to box shadows
Admittedly, the box-shadow property is a bit tricky, syntax-wise. You can specify how far the box shadow should move to the right, how far it should move down, how much blur the shadow should have, and how far out it should spread. You can specify whether the box shadow should be on the inside of your object, or the outside. Finally, you can specify what color you want the box shadow to have.
Here are a few examples:
/* 10 px to the right, 10 px down, and a black shadow */
box-shadow: 10px 10px black;
/* 10 px down, 10px blur, white shadow */
box-shadow: 0 10px 10px white;
/* No offset or blur, but a 5px spread and a opaque black color */
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5);One of the real super powers of box-shadows is that you can layer several on top of each other. You do that by placing one on top of the other, separating them with commas:
box-shadow: 0 10px 10px yellow, 0 -10px 10px gold;Creating a basic border with box-shadow
"But Kris, these are shadows, not borders! Borders doesn't look like shadows at all!"
Yep, I understand where you're coming from. Luckily you can create something that looks just like borders!
First, let's forget about offsets and blur. With borders, we don't need those. We do, however, need to specify whether or not the "border" should be on the inside or outside edge of the element we're trying to style. We also need to specify the width and color. Here's a 1 px border-looking box shadow:
box-shadow: 0 0 0 1px black;If we wanted the border to overlay the content of our box, we could also specify the inset keyword at the beginning:
box-shadow: inset 0 0 0 1px black;Creating an offset border with box-shadow
Now, here's a thing you can't do with regular borders - creating a border that's offset slightly!
Actually, you need two box-shadows. One wide one, which should be the sum of the border and the offset, and another one, which will work as the offset. It'll look like this:
background: white;
box-shadow: inset 0 0 0 8px white, inset 0 0 0 10px black;Here's a code pen showing a few different examples of this technique: