How to Keep a Div's Dimensions Unchanged When Adding an Inner Border?

How to Position a Border Inside a Div Without Extending Its Dimensions?

When styling a

element with a border, the default behavior is to add the border thickness to both the width and height of the element. However, you may encounter scenarios where you want the border to appear within the existing dimensions of the div.

To achieve this effect, you can use the box-sizing property and set it to border-box:

div {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid #f00;
  background: #00f;
  margin: 10px;
}

By setting box-sizing to border-box, the width and height of the div will include the border thickness, ensuring that the visible box remains the same size while the border appears inside its edges:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 100px;
height: 100px;
border: 20px solid #f00;
background: #00f;
margin: 10px;

Copy after login

}

div div {

box-sizing: border-box;
border: 10px solid red;

}

Hello!

Hello!

The above is the detailed content of How to Keep a Div's Dimensions Unchanged When Adding an Inner Border?. For more information, please follow other related articles on the PHP Chinese website!