How to Place Border Inside of div and Not on its Edge

In HTML, to draw or place borders inside a div container, there exists a simple method. Users can utilize the CSS “border” property and move it inside the element’s box using the CSS “box-shadow” property with an inset value and set the value. Furthermore, “box-size” is utilized to define the box size, and the value “border-box” includes padding and border in the element’s width and height.

This post will explain the procedure for placing the border inside the div and not on its edge.

How to Place Border Inside of div and Not on its Edge?

To place the border inside of the div and not on its edge, try out the mentioned procedure.

Step 1: Insert Heading

First, add a heading with the help of a heading tag from “<h1>” to “<h6>”. To do so, the <h1> tag is utilized:

Step 2: Make div Container

Next, utilize the “<div>” tag to make a container. Also, insert the class attribute inside the div opening tag. Users can also add multiple class attributes in the single div container by assigning names to a class attribute. For instance, we will set three different class names in one container “box”, “circle”, and “border”:

Step 3: Style Heading

Then, access the heading and apply different CSS properties for styling:

Here:

• “font-style” property specifies the font style as “italic”.
• “color” is utilized for setting the heading color as “blue”.

Step 4: Style “box” Class

Now, access the “.box” class using the dot selector. Then, apply the following CSS properties:

According to the given code snippet:

• “height” defines the size of the element vertically.
• “width” property allocates a specific width to the element.
• “background” property sets a specific color to the element’s background.
• “margin” defines spaces around the element.

Output

Step 5: Style “border” Class

Utilize the “.border” for accessing the second class and apply properties that are listed below:

Here:

• “border” property defines a boundary outside of the element.
• “box-size” is utilized for defining the size of the box, and the value “border-box” includes padding and border in the element’s width and height.
• “box-shadow” property inserts a shadow outside of an element. To do so, the “inset” value is set with a specific color as “rgb(15, 15, 15)”.

Output

Step 6: Style “circle” Class

Access the third class by using its “.circle”:

Then, apply the “border-radius” property to make the curve round from all sides. More specifically, it will be utilized for making the outer border corner round in the shape of an element. Users can create circular corners with the help of a single radius or elliptical corners with two radii.

Output

That was all about placing the border inside the div and not on its edge.

Conclusion

To place the border inside of the div and not on its edge, first create a div container with the help of “<div>”. Next, add a border using the “border” property and utilize “box-sizing” for defining the size of the box. Its value includes a border and padding in the element’s width and height. After that, utilize the “box-shadow” property that inserts a shadow outside an element. This write-up demonstrated the procedure for placing the border inside of a div but not on its edge.