Menu
How to Create a inner border for a box in html?
See this picture:
207
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.
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.
Take a look at this , we can simply do this with outline-offset property
Output image look like
.black_box {
width:500px;
height:200px;
background:#000;
float:left;
border:2px solid #000;
outline: 1px dashed #fff;
outline-offset: -10px;
}<div class="black_box"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
