CSS borders interfering with absolute positioning
I also discovered that using a border of zero width (so that it doesn't affect layout), and then adding a box-shadow to emulate a visible border, seems to work well.
Six years later...
The other answers didn't work for my situation since the box I was styling already had a box-shadow. I needed a border on just one side like border-left
and a border-radius
, but without the border affecting the position or width of the element. The solution I came up with was to apply the border on an inner element of the absolutely positioned element.
.outer {
position: absolute;
width: 200px;
height: 100px;
border-radius: 5px;
background-color: #c8c8c8;
}
.inner {
height: 100%;
min-height: 100%;
min-width: 100%;
width: 100%;
border-left: solid 5px #097fee;
border-radius: 5px;
}
<div class="outer">
<div class="inner">
Some content
</div>
</div>
Try out CSS2 outline
property:
.bordered {
outline:2px solid blue;
}
Outline does not affect element position.
You can also use CSS3 outline-offset
as seen here: http://www.css3.info/preview/outline/