# CSS Border inside the element

> 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.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2021-05-13 | Topics: [CSS](https://flaviocopes.com/tags/css/) | Canonical: https://flaviocopes.com/css-border-inside-element/

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

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

![Four black boxes with white text showing JavaScript, Python, React, and HTML labels](https://flaviocopes.com/images/css-border-inside-element/Screen_Shot_2021-04-18_at_21.41.52.png)

So I went on and added

```css
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](https://flaviocopes.com/images/css-border-inside-element/Screen_Shot_2021-04-18_at_21.42.43.png)

But then.. the box didn't look "as a box". So I added a border:

```css
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](https://flaviocopes.com/images/css-border-inside-element/Screen_Shot_2021-04-18_at_21.44.33.png)

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


```css
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](https://flaviocopes.com/images/css-border-inside-element/Screen_Shot_2021-04-18_at_21.42.01.png)

If you want to tweak `box-shadow` values visually, try my free [shadow and radius generator](https://flaviocopes.com/tools/shadow-radius/).