Using box-shadow to construct a border

Have you ever asked yourself why so many developers even frontend developers tend to avoid using CSS. Developers are very often enthusiastic when they have to do something new with a framework like Angular, React, Vue.js... or when learning a new technology or a language, but they are much less enthusiastic when we're talking about CSS. And I think I know why! There are no standards in CSS. There are often many ways to do one thing and I have to admit, it could be frustrating because you don't even know whether what you're doing is good or bad. And my article today presents you one of the simplest thing you can do in CSS: adding a border to a box. Obviously, it is simple, but I'll present you (I hope) a new way of doing that...

Using the border property

So, adding a border to a box, is pretty simple when you use the border property. Let's start a first basic example by drawing a small square and adding a red border to it. I volontarly add some content to the div, with a small padding in it, it'll be necessary for the next of the article:

<div class="border">
  Border
</div>

div {
  width: 100px;
  height: 100px;
  padding: 5px;
  margin-bottom: 10px;
}

.border{
  border: 1px solid red;
}

Now, suppose you need to add some style when your mouse go above the square like strengthening the border. Let's make our first solution with the border property:

div {
  width: 100px;
  height: 100px;
  padding: 5px;
}

.border{
  border: 1px solid red;
  
  &:hover {
  	border: 3px solid red;
  }
}

Do you see what's happening when your mouse is hovering the box? Your content move forward and the rendering is not really beautiful.

Box-shadow

This property is pretty useful when you need to add a shadow to an element. You often use this property when you need to bring out a box from the background like this:

But did you know that you can use this property to just drawing borders? This is more difficult than just using the border property but you'll be able to resolve some strange issues like the one we've seen previously. So here is the specification of the box-shadow property:

box-shadow: inset | offset-x | offset-y | blur-radius | spread-radius | color

• inset: Specifies whether the shadow will be inside or outside the frame. You can omit this property.
• offset-x: You can set the length of the shadow effect. You can specify negative values to render the shadow to the left.
• offset-y: You can set the length of the shadow effect. You can specify negative values to render the shadow to the top.
• blur-radius: Specifies the length of the blur so the shadow will become bigger and lighter. This is not something we'll use in our example.
• spread-radius: Use this property to expand (with positive values) or shrink (with negative values) your shadows.
• color: Set the color of the shadow!

So here is a small recap of drawing borders with the box-shadow property:

box-shadow: 0 1px 0 0 red; /* Border bottom */
box-shadow: 0 -1px 0 0 red; /* Border top */
box-shadow: -1px 0 0 0 red; /* Border left */
box-shadow: 1px 0 0 0 red; /* Border right */
box-shadow: 0 0 0 1px red; /* All the borders by using the spread properties */

So with that in mind, we can now use the box-shadow to resolve our previous issue. So I added a new box and drawn the borders with the box-shadow property:

<div class="shadow">Box shadow</div>

.shadow {
  box-shadow: 0 0 0 1px red;
}

Now let's add the hover case:

.shadow {
  box-shadow: 0 0 0 1px red;
  
  &:hover {
    box-shadow: 0 0 0 3px red;
  }
}

Now, you can notice that your content does not move forward when you pass your mouse above the box. Don't you find that the rendering is far better?

Conclusion

This is an illustration that in CSS, you have so many possibilities. Using border is simple and can answer the majority of your use cases but sometimes, there will be cases like the one above where you'll need something better and box-shadow could resolve your problems. This is just an example, there are other cases when using box-shadow could be useful. For example, when you want more than just one border, box-shadow could help you.
You can find the code sample here: https://codepen.io/michelre/pen/EoPMGv