How to place the border inside of div and not on its edge with CSS?

Spread the love

Sometimes, we want to place the border inside of div and not on its edge with CSS.

In this article, we’ll look at how to place the border inside of div and not on its edge with CSS.

How to place the border inside of div and not on its edge with CSS?

To place the border inside of div and not on its edge with CSS, we set the box-shadow property.

For instance, we write

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  box-shadow: 0px 0px 0px 10px black inset;
  margin-bottom: 20px;
}

to set the box-shadow property to inset to place the border inside the div.

Conclusion

To place the border inside of div and not on its edge with CSS, we set the box-shadow property.

Leave a Reply

Your email address will not be published. Required fields are marked *