Placing a stunning border outside an element is normal, anybody can do that. But have you ever thought of placing a border inside of the element?
Well, it’s also an easy task and you can do it with a little CSS. In this tutorial, we will look at 3 easy methods that can help us place a border inside of the element. These three methods are as follows:
Let’s discuss each method in detail:
1. Place a border inside of a div using CSS box-sizing property
This is the easiest way of placing a border inside of the element. In this method, we first create a normal border around the element, set its width and height and then apply the box-sizing: border-box; property to place the border inside.
When you set the box-sizing to border-box for any element, its border and padding are also included in its total width and height. Therefore, if you place any border it will be automatically placed inside the element.
Here is a working example of it:
Example:
div{
border: 15px solid grey;
box-sizing: border-box;
height: 100px;
background: coral;
}
2. Place a border inside of a div using CSS box-shadow Property
CSS box-shadow property is also a good alternative to place a border inside of an element. In this method, instead of creating an actual border, we create a box shadow and put it inside the element using the inset keyword.
Here is a working example of it:
Example:
div{
box-shadow: 15px -15px 0px grey inset, -15px 15px 0px grey inset;
height: 100px;
background: coral;
}
3. Place a border inside of a div using CSS outline Property
In this method also, we do not create any border around the element. Rather, we first create an outline and then place it inside the element by specifying a negative outline-offset value.
Here is a working example of it:
Example:
div{
outline: 15px solid grey;
outline-offset: -15px;
height: 100px;
background: coral;
}
