3 Easy Ways to Place a Border Inside of a Div Using CSS

An HTML website’s style is controlled by CSS, which is also a fundamental part of HTML. One of the styling properties provided by CSS is the “border” property. Mostly borders are created outside of the elements, but CSS allows us to insert a border inside an element with the help of different properties, which are box-shadow, outline, and box-sizing.

In this article, we will learn the procedure to place borders inside the div using:

• box-shadow property
• outline with outline-offset property
• box-sizing property

So, let’s start!

Method 1: Place a Border Inside of a Div Using “box-shadow” Property

We can place a border inside the div using the “box-shadow” property. So, first, go through the box-shadow property and its functionality.

What is “box-shadow” Property?

In CSS, the “box-shadow” property allows us to set a shadow to any element or image. This property is based on the following values:

• offset-x: It is used to add horizontal shadow.
• offset-y: It is used to add vertical shadow.
• color: It is utilized to place the color of the shadow.

Syntax

To clarify these points, let’s move to the syntax of the box-shadow property:

Here is the description related to the above-mentioned values:

• “offset-x” and “offset-y” can be positive or negative.
• “blur-radius” makes the shadow brighter or lighter.
• By using “spread”, you can set the size of the shadow.
• In the place of “color”, you will assign any color you want to give to the image.
• “inset” is used to set the shadow inside the element. If you do not use it, a shadow will appear outside of the box.

Note: “blur-radius”, “spread”, and “inset” are the optional values of the box-shadow property. You can use these values in some special cases.

For a better understanding of the usage of the box-shadow property, let’s implement a practical example.

Example

In the HTML section, we will create a container using <div> tag and heading <h1> inside it.

HTML

Next, in the CSS file, we will use “div” to access the already created div and place the border inside of it by follow the given instructions:

• Set the width and height of the div as “700px” and “250px”.
• Specify the text color as “rgb(13, 214, 214)”.
• Set the values for text alignment using the line-height property as “200px” and text-align property as “center”.
• By using the background property, set the background color of the div as “black”.
• Create a border using border property with “15px” width, “solid” shape, and “black” color.
• For inside shadow, use the “box-shadow” property and set the value of offset-x, offset-y, and blur as “0px”, spread as “5px”, the color of shadow as “rgb(255, 251, 0)” and use “inset” to place border inside the div.

CSS

Note: The value of offset-x and offset-y is set as 0 because we need borders on all sides of the div.

After implementing the given code, go to the HTML file and execute it to see the following outcome:

Note: By increasing the value of the “spread”, you can increase the width of the border.

Method 2: Place a Border Inside of a Div Using “outline” and “outline-offset” Property

The “outline” property is used to set the line outside of the element. It is the shorthand property of “outline-width”, “outline-style”, and “outline-color”. The syntax of the outline property is as follows:

Here is the description related to the above-mentioned values:

• outline-width: It is used to set the width of the outline.
• outline-style: It is used to set the style of the outline.
• outline-color: It is utilized to specify the outline color.

Similarly, the “outline-offset” property is used to set the space between the edge of the element and the outline. This space is transparent. The syntax of the outline-offset property is:

In the place of value, you can set the space you want to set between the edge of the element and the outline. It creates an outline inside of the element when a negative value is specified.

Let’s move to the example of creating a border inside the div.

Example

In this example, we will create two divs with class names “div1” and “div2” and add a heading inside it using <h1> tag.

HTML

In CSS, use “div1” to access the container we have created in the HTML file. To insert the border inside of the div, follow the given instructions:

• Set the width and height of the div as “500px”.
• Adjust the border’s radius to “50%”.
• Set the color of the text as “rgb(13, 214, 214)”.
• Set the values for text alignment using the line-height property as “500px” and text-align property as “center”.
• By using the background property, set the background color of the div as “black”.
• Create a border using border property as “15px”, “solid”, and “black”.
• For the inside border, use the “outline” property and set the value as “10px”, “ridge”, and “rgb(0, 255, 242)” and set the value of “outline-offset” as “-25px” to place the border inside the div.

CSS

For the styling of the second div, only change the style of the outline using the “outline” property and set the values as follows:

Method 3: Place a Border Inside of a Div Using “box-sizing” Property

CSS “box-sizing” property calculates the width and height of the element. Syntax of the box-sizing property is:

In the place of value, you can set the value of box-sizing as “content-box” and “border-box”.

Example

In the below given example, we will create a div class name “div1” and add a heading inside it.

HTML

In the CSS, we will use “div1” to access the created div. Next, insert the border inside of the div as follows:

• Set the width and height of the div as “550px”.
• Set the color of the text as “rgb(2, 255, 137)”.
• Set the values for alignment of text using the line-height property as “420px” and text-align property as “center”.
• By using the background property, set the background color of the div as “black”.
• Create a border using border properties as “50px”, “groove”, and “rgb(81, 255, 0)”.
• Next, use the “border” property and set the value as “50px”, “groove”, and “rgb(81, 255, 0)” and set the value of “box-sizing” as “border-box” to place the border inside the div.

After implementing the given code, you will see the following output:

We have provided the three easiest ways for placing a border inside of a div using CSS.

Conclusion

To place a border inside the div, first, create a border using the “border” property, then use the “box-shadow” and “outline” with “outline-offset” and “box-sizing” properties of CSS. The border property creates a border around the element, and the other four properties can be used to move the border inside the div. As a result of this article, we have shown you the three easiest methods to place borders inside the div.
To place a border inside the div, first, create a border using the “border” property, then use the “box-shadow” and “outline” with “outline-offset” and “box-sizing” properties of CSS. The border property creates a border around the element, and the other four properties can be used to move the border inside the div. As a result of this article, we have shown you the three easiest methods to place borders inside the div.