CSS borders interfering with absolute positioning

Question

[edit: clarified that box-sizing: border-box doesn\'t seem applicable, since I\'m using absolute positioning]

The following code illustrates my problem. I\'m using absol

Answer 1

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.

Answer 2

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/

Answer 3

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>