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)?
Best cross browser solution (mostly for IE support) like @Steve said is to make a div 98px in width and height than add a border 1px around it, or you could make a background image for div 100x100 px and draw a border on it.
Use pseudo element:
.button {_x000D_
background: #333;_x000D_
color: #fff;_x000D_
float: left;_x000D_
padding: 20px;_x000D_
margin: 20px;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.button::after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
border: 5px solid #f00;_x000D_
}
_x000D_
<div class='button'>Hello</div>
_x000D_
Using ::after
you are styling the virtual last child of the selected element. content
property creates an anonymous replaced element.
We are containing the pseudo element using absolute position relative to the parent. Then you have freedom to have whatever custom background and/or border in the background of your main element.
This approach does not affect placement of the contents of the main element, which is different from using box-sizing: border-box;
.
Consider this example:
.parent {_x000D_
width: 200px;_x000D_
}_x000D_
_x000D_
.button {_x000D_
background: #333;_x000D_
color: #fff;_x000D_
padding: 20px;_x000D_
border: 5px solid #f00;_x000D_
border-left-width: 20px;_x000D_
box-sizing: border-box;_x000D_
}
_x000D_
<div class='parent'>_x000D_
<div class='button'>Hello</div>_x000D_
</div>
_x000D_
Here .button
width is constrained using the parent element. Setting the border-left-width
adjusts the content-box size and thus the position of the text.
.parent {_x000D_
width: 200px;_x000D_
}_x000D_
_x000D_
.button {_x000D_
background: #333;_x000D_
color: #fff;_x000D_
padding: 20px;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.button::after {_x000D_
content: '';_x000D_
position: absolute;_x000D_
top: 0;_x000D_
right: 0;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
border: 5px solid #f00;_x000D_
border-left-width: 20px;_x000D_
}
_x000D_
<div class='parent'>_x000D_
<div class='button'>Hello</div>_x000D_
</div>
_x000D_
Using the pseudo-element approach does not affect the content-box size.
Depending on the application, approach using a pseudo-element might or might not be a desirable behaviour.
I know this is somewhat older, but since the keywords "border inside" landed me directly here, I would like to share some findings that may be worth mentioning here. When I was adding a border on the hover state, i got the effects that OP is talking about. The border ads pixels to the dimension of the box which made it jumpy. There is two more ways one can deal with this that also work for IE7.
1) Have a border already attached to the element and simply change the color. This way the mathematics are already included.
div {
width:100px;
height:100px;
background-color: #aaa;
border: 2px solid #aaa; /* notice the solid */
}
div:hover {
border: 2px dashed #666;
}
2 ) Compensate your border with a negative margin. This will still add the extra pixels, but the positioning of the element will not be jumpy on
div {
width:100px;
height:100px;
background-color: #aaa;
}
div:hover {
margin: -2px;
border: 2px dashed #333;
}
Probably it is belated answer, but I want to share with my findings. I found 2 new approaches to this problem that I have not found here in the answers:
box-shadow
css propertyYes, box-shadow is used to add box-shadows to the elements. But you can specify inset
shadow, that would look like a inner border rather like a shadow. You just need to set horizontal and vertical shadows to 0px
, and the "spread
" property of the box-shadow
to the width of the border you want to have. So for the 'inner' border of 10px you would write the following:
div{
width:100px;
height:100px;
background-color:yellow;
box-shadow:0px 0px 0px 10px black inset;
margin-bottom:20px;
}
Here is jsFiddle example that illustrates the difference between box-shadow
border and 'normal' border. This way your border and the box width are of total 100px including the border.
More about box-shadow:here
Here is another approach, but this way the border would be outside of the box. Here is an example.
As follows from the example, you can use css outline
property, to set the border that does not affect the width and height of the element. This way, the border width is not added to the width of an element.
div{
width:100px;
height:100px;
background-color:yellow;
outline:10px solid black;
}
More about outline: here
A more modern solution might be to use css variables
and calc
. calc
is widely supported but variables
is not yet in IE11 (polyfills available).
:root {
box-width: 100px;
border-width: 1px;
}
#box {
width: calc(var(--box-width) - var(--border-width));
}
Although this does use some calculations, which the original questions was looking to avoid. I think this is an ok time to use calculations as they are controlled by the css itself. It also has no need for additional markup or misappropriating other css properties that may be needed later on.
This solution is only really useful if a fixed height isn't needed.
for consistent rendering between new and older browsers, add a double container, the outer with the width, the inner with the border.
<div style="width:100px;">
<div style="border:2px solid #000;">
contents here
</div>
</div>
this is obviously only if your precise width is more important than having extra markup!
You can also use box-shadow like this:
div{
-webkit-box-shadow:inset 0px 0px 0px 10px #f00;
-moz-box-shadow:inset 0px 0px 0px 10px #f00;
box-shadow:inset 0px 0px 0px 10px #f00;
}
Example here: http://jsfiddle.net/nVyXS/ (hover to view border)
This works in modern browsers only. For example: No IE 8 support. See caniuse.com (box-shadow feature) for more info.
You can look at outline with offset but this needs some padding to exists on your div. Or you can absolutely position a border div inside, something like
<div id='parentDiv' style='position:relative'>
<div id='parentDivsContent'></div>
<div id='fakeBordersDiv'
style='position: absolute;width: 100%;
height: 100%;
z-index: 2;
border: 2px solid;
border-radius: 2px;'/>
</div>
You might need to fiddle with margins on the fake borders div to fit it as you like.
Yahoo! This is really possible. I found it.
For Bottom Border:
div {box-shadow: 0px -3px 0px red inset; }
For Top Border:
div {box-shadow: 0px 3px 0px red inset; }
One solution I didn't see mentioned above is the case where you have padding on your input, which I do 99% of the time. You can do something along the lines of...
input {
padding: 8px;
}
input.invalid {
border: 2px solid red;
padding: 6px; // 8px - border or "calc(8px - 2px)"
}
What I like about this is that I have the full menu of border + padding + transition properties for each side.
Although this question has already been adequately answered with solutions using the box-shadow
and outline
properties, I would like to slightly expand on this
for all those who have landed here (like myself) searching for a solution for an inner border with an offset
So let's say you have a black 100px x 100px div
and you need to inset it with a white border - which has an inner offset of 5px (say) - this can still be done with the above properties.
The trick here is to know that multiple box-shadows are allowed, where the first shadow is on top and subsequent shadows have lower z-ordering.
With that knowledge, the box-shadow declaration will be:
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white;
div {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: black;_x000D_
box-shadow: inset 0 0 0 5px black, inset 0 0 0 10px white; _x000D_
}
_x000D_
<div></div>
_x000D_
Basically, what that declaration is saying is: render the last (10px white) shadow first, then render the previous 5px black shadow above it.
For the same effect as above the outline declarations would be:
outline: 5px solid white;
outline-offset: -10px;
div {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: black;_x000D_
outline: 5px solid white;_x000D_
outline-offset: -10px;_x000D_
}
_x000D_
<div></div>
_x000D_
NB: outline-offset
isn't supported by IE if that's important to you.
If you use box-sizing: border-box means not only border, padding,margin, etc. All element will come inside of the parent element.
div p {_x000D_
box-sizing: border-box;_x000D_
-moz-box-sizing: border-box;_x000D_
-webkit-box-sizing: border-box;_x000D_
width: 150px;_x000D_
height:100%;_x000D_
border: 20px solid #f00;_x000D_
background-color: #00f;_x000D_
color:#fff;_x000D_
padding: 10px;_x000D_
_x000D_
}
_x000D_
<div>_x000D_
<p>It was popularised in the 1960s with the release of Letraset sheets</p>_x000D_
</div>
_x000D_
You can use the properties outline
and outline-offset
with a negative value instead of using a regular border
, works for me:
div{_x000D_
height: 100px;_x000D_
width: 100px;_x000D_
background-color: grey;_x000D_
margin-bottom: 10px; _x000D_
}_x000D_
_x000D_
div#border{_x000D_
border: 2px solid red;_x000D_
}_x000D_
_x000D_
div#outline{_x000D_
outline: 2px solid red;_x000D_
outline-offset: -2px;_x000D_
}
_x000D_
Using a regular border._x000D_
<div id="border"></div>_x000D_
_x000D_
Using outline and outline-offset._x000D_
<div id="outline"></div>
_x000D_
Source: Stackoverflow.com