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

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

So I went on and added

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

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.

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:

#css #css border