CSS Border inside the element

May 13, 2021

Learn how to draw a CSS border inside an element instead of outside it, using box-shadow with the inset keyword so the box size never shifts on hover.

~~~

I had a list of boxes, and on hover I wanted to invert the colors;

div {
  background-color: #000;
  color: #fff;
}

Four black boxes with white text showing JavaScript, Python, React, and HTML labels

So I went on and added

div:hover {
  background-color:#fff;
  color:#000;
}

Four boxes with inverted colors on hover: three black boxes and one white box with black text showing HTML

But then.. the box didn’t look “as a box”. So I added a border:

div:hover {
  background-color:#fff;
  color:#000;
  border: 4px solid #000;
}

but it looked weird because of curse the border is added outside the box.

Four boxes showing the HTML box with a black border extending outside the element boundaries making it look misaligned

The best way I found was to use the box-shadow property in this way:

div:hover {
  background-color:#fff;
  color:#000;
  box-shadow: inset 0px 0px 0px 4px #000;
}

Here’s the result:

Four boxes with the HTML box showing an inner black border using box-shadow inset that stays within the element

If you want to tweak box-shadow values visually, try my free shadow and radius generator.

Tagged: CSS · All topics

~~~