Setting Border inside DIV Element

For styling the created container, put a “.” before the class name as “.example”. Then, specify the height and width as “250px”, set the “13px” orange border, and use the “border-box” as the box-sizing property. Moreover, we have also set the “background-color” as “aqua” to distinguish between the background and the added border.

Save the provided code and open up the HTML file in your browser:

.example {
background-color: aqua;
width: 250px;
height: 250px;
border: 13px solid orange;
box-sizing: border-box;
}

As a result, the border will be added inside the container, and the height and width will stay same:

Move ahead towards the next method!

Method 2: Using outline Property to Set Inner Border in CSS

The CSS “outline” property easily adds a line around the element’s box with the desired width, color, and type. This means we can utilize the outline property for setting the inner border. Additionally, the “outline-offset” property assists in restricting the expansion of the border.

Specify the “outline” property with the value “solid 12px orange”, where orange is the color for the line and 12px is the width, and solid is a type of style for the line. Then, use the “outline-offset” property along with the “-12px” value. This will put the border inside the container and restrain the expansion with respect to the container:

.example {
background-color: aqua;
width: 250px;
height: 250px;
outline: solid 12px orange;
outline-offset: -12px ;
}

Hovering over the added container will show its current dimension which is “250 x 250” as specified in the HTML file:

Want to set an inner border using shadows? Let’s check out the following section.

Method 3: Using box-shadow Property to Set Inner Border in CSS

The “box-shadow” property is mainly used for dropping the shadows from the frames of elements. However, using this property in a certain way can set the inner border efficiently.

In the HTML file, state the “box-shadow” property with the value “inset 0px 0px 0px 12px orange”, where orange is a color, 12px will make the shadow wider, and inset will place the shadow inside the container. The other 0px values are related to offsetting and blurring. The combination of all these values will form an inner border using shadows:

.example {
background-color: aqua;
width: 250px;
height: 250px;
box-shadow: inset 0px 0px 0px 12px orange;
}

To verify if the height and width values are still the same, view the container dimension by hovering over it:

We have offered the most appropriate methods for setting inner borders in CSS.

Conclusion

To set the inner border, you can use the “box-sizing”, “outline”, and “box-shadow” CSS properties. The box-sizing property is used to restrict the expansion of the added border. The outline property is used in combination with the outline-offset for adding an outline as an inner border. Moreover, shadows can also be utilized for the specified purpose with the help of the box-shadow property. In this post, we have described three methods to set the inner border in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

CSS Inner Border

The inner border is nothing but space created between Border and outline property or element. We can apply the inner Border to the text of paragraphs, headers, table content, and images. There is no restriction that the inner Border always is in rectangular or square shape only; it can be any shape.

Web development, programming languages, Software testing & others

Rectangular border shape of the inner Border:

Rectangular border-radius shape of the inner Border:

The above two images conclude that the inner Border can be of any shape.

Working Principle of Inner Border

The inner Border is working on properties called outline and outline-offset. Outline property describes element border size, border type, and color of the Border, respectively.

Outline-offset describes the distance or space between the border and the outline element.

Examples with Syntax of CSS Inner Border

Given below are the examples of CSS Inner Border:

Outline Border has Multiple Types

• Solid: It provides the border with a solid, just like bold text.
• Dotted: It gives the border with dotted lines.
• Dashed: It provides the border with dashed lines.
• Double: It gives Border as double solid.
• Groove: It gives outside curved edges as a border.
• Ridge: It provides inside curved edges as a border (opposite functionality of groove).

Example #1 – Outline and offset with Solid Border.

     .solid  
Hi, I am dashed outline offset model. CSS Make me look like this.
  

Example #2 – Outline and offset Dotted Border

     .dotted  
Hi, I am dotted outline offset model. CSS Make me look like this.
  

Example #3 – Outline and offset with Dashed Border

     .dashed 
Hi, I am dashed outline offset model. CSS Make me look like this.
  

Example #4 – Outline and offset with Double Border

     .double 
Hi, I am double outline offset model. CSS Make me look like this.
  

Example #5 – Outline and offset with Groove Border

     .groove 
Hi, I am Groove outline offset model. CSS Make me look like this.
  

Example #6 – Outline and offset with Ridge Border

     .ridge 
Hi, I am Ridge outline offset model. CSS Make me look like this.
  

Conclusion

The inner Border always creates space between the Border and the outer element; the Border creates space from the text to the top, whereas the outline border creates space between the borders to the outer element.

Conclusion Analogy:

The black color is border-created between the top and text, and the inner Border is green color created between the border outline.

Recommended Articles

This is a guide to the CSS Inner Border. Here we discuss the introduction, working principle, and different examples of Inner Border. You may also have a look at the following articles to learn more –

38+ Hours of HD Videos
9 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

149+ Hours of HD Videos
28 Courses
5 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

253+ Hours of HD Videos
51 Courses
6 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

CSS Course Bundle — 19 Courses in 1 | 3 Mock Tests
82+ Hours of HD Videos
19 Courses
3 Mock Tests & Quizzes
Verifiable Certificate of Completion
Lifetime Access
4.5

Источник