How to Set Inner Border in CSS

1. Use the box-sizing Property to Set the Inner Border in CSS
2. Use the box-shadow Property to Set the Inner Border in CSS
3. Use the outline and outline-offset Properties to Set the Inner Border in CSS

In this article, we will introduce methods to set borders inside of a container in CSS. The border inside of a container is called the inner border.

Use the box-sizing Property to Set the Inner Border in CSS

When we add a border or padding to an element inside a container, the size of the container will grow. The size will differ from the initial one. To eliminate the problem, we can add an inner border to the container.

The inner border is a space created between border and outline property or element. We can apply an inner border to table content, images, and text of paragraphs and headers. An inner border can be of any shape like rectangular, square, circular, etc.

The inner border will not increase the size of the container, and the predefined size will be constant. We can use the box-sizing property to create an inner border in CSS. Setting the box-sizing property to border-box will include the border and padding within the dimension of the container.

For example, style a div by setting the box-sizing property to border-box. Set the height and width of div to 200px. Next, create a solid border of 10px width and red color. Then, set the background property to green.

Here, we have created a div with dimensions of 200x200 px. Even if we added a border of 10px, the container’s dimension did not change. The border lies within the container. Thus, we can use the box-sizing property to set the inner border in CSS.

Example Code:

div {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 10px solid red;
    background: green;
}

<div></div>

Use the box-shadow Property to Set the Inner Border in CSS

Another way of achieving the inner border is to use the box-shadow CSS property. Using the property, we can specify the inset shadow that would look like an inner border rather than a shadow.

We can set the horizontal and vertical offset values for box-shadow as the first two values. The other three values, blur, spread, and color, are optional. We can set the spread radius to the desired value to create a shadow. Then, using the inset option will change the outer shadow to the inner shadow. The shadow will fall inside the container. Finally, it looks like an inner border.

For example, set the height and width properties of div as 200px. Set the background color to green. Then, use the box-shadow property and set the first three options to 0px. Set spread radius, the fourth option to 10px. Give the color red and set the inset option.

Here, we created an inner border with the width of 10px using the box-shadow property.

Example Code:

div {
    width:200px;
    height:200px;
    background-color:green;
    box-shadow:0px 0px 0px 10px red inset;
}

<div></div>

Use the outline and outline-offset Properties to Set the Inner Border in CSS

We can set the inner border using the outline and outline-offset properties in CSS. The outline property describes the element’s border size, border type, and border color. The outline-offset property describes the distance or space between the border and outline element.

For example, set the height and width of the div to 200px. Give green color as the background. Next, set outline as 5px solid red. Then, set outline-offset to -5px.

Here, the outline property creates an outer border in the container. Using the outline-offset property and setting it to the negative value of the width of the border will change the outer border to the inner border.

Example Code:

div {
    width: 200px;
    height: 200px;
    background: green;
    outline: 5px solid red;
    outline-offset: -5px;
}

<div></div>