CSS Inner Border: Drawing a Border Inside the Box

While designing my personal landing page, I wanted to create an inner border effect, and I learned a clever technique for it. When it comes to a CSS inner border, your first instinct is probably to use padding or margin to make the box bigger. But that doesn’t work: when you enlarge the box, the border moves along with it, so you can’t create an inner border style this way.

The solution I found online is to first draw the border in place, then use box-shadow to paint a “shadow” outside the box in the same color as the box’s background. Because this shadow has no offset, it creates the visual illusion of an inner border!

Using the image above as an example, box-shadow paints a 5px white shadow outside the box. Since there is no offset, the shadow looks like part of the box itself. Here is the CSS for reference:

.box {
  background: white;
  border: red 1px solid;
  box-shadow: 0 0 0 5px white;
}