How to place border inside of a div element using CSS?
The borders are generally added to outline the div element. In this tutorial, we will be learning to add a border inside a div element using CSS.
Using border-sizing property
The border-sizing property can be used to add the border inside a div element. Add border-sizing:border-box property to the div element.
For cross-browser, we can add -moz-box-sizing: box-border and -webkit-box-sizing:box-border. In addition to that set the width and height of the div element.
Example: Place border inside div using box-sizing
In this tutorial, we have added a border inside a div element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid blue;
background: red;
margin: 10px;
}
</style>
</head>
<body>
<h2> Border inside a div element</h2>
<div>Some Div </div>
</body>
</html>
Output
Here is the output of the above program.
Using outline property
This is another way to add borders. Use outline and outline-offset with negative values. It will add the border inside the div.
Example: Add border inside div using an outline property
In this program, we have added an outline:10px solid black along with outline-offset: -2px.
Conclusion
In this tutorial, we have learned to add a border inside a div using CSS properties. Though the border cannot be directly added inside div. So we have used box-sizing and outline property to do so.
