How to Place a Border inside an Element with CSS

John on January 12, 2021

Unfortunately, there is no CSS property for creating borders inside HTML elements. We can, however, create the illusion of an inset border by using the box-shadow and border properties.

Let's create an HTML element with two class attributes. The first will be a generic name for the class of styling and the second for the inner border effect.

<div class="item inner-border"></div>

.item {
  width: 100px;
  height: 100px;
  background: blue;
}

.inner-border {
  box-shadow: inset 0px 0px 0px 10px black;
  border: 10px solid blue;
}

With the .inner-border class in the example above, we are creating an inset box-shadow with no blur, a 10-pixel width and a black background. The illusion of an inset border is created with the border property.