Placing border inside of div and not on its edge

html css border
TheMonkeyMan picture TheMonkeyMan · Mar 7, 2012 · Viewed 1M times · Source

I have a <div> element and I want to put a border on it. I know I can write style="border: 1px solid black", but this adds 2px to either side of the div, which is not what I want.

I would rather have this border be -1px from the edge of the div. The div itself is 100px x 100px, and if I add a border, then I have to do some mathematics to make the border appear.

Is there any way that I can make the border appear, and ensure the box will still be 100px (including the border)?

Answer

sandeep picture sandeep · Mar 7, 2012

Set box-sizing property to border-box:

div {
    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;
}

div + div {
    border: 10px solid red;
}
<div>Hello!</div>
<div>Hello!</div>

It works on IE8 & above.

Related questions

How to set a border for an HTML div tag

I am trying to define a border around a div tag in HTML. In some browsers the border does not appear. Here is my HTML code: How do I set a border for an HTML div tag?

Read More
How to increase space between dotted border dots

I am using dotted style border in my box like .box { width: 300px; height: 200px; border: dotted 1px #f00; float: left; } I want to the increase the space between each dot of the border.

Read More
How do I force a DIV block to extend to the bottom of a page even if it has no content?

In the markup shown below, I'm trying to get the content div to stretch all the way to the bottom of the page but it's only stretching if there's content to display. The reason I want to do this is …

Read More