Add Border to Element Without Effecting Element Size
Posted on 2008-06-13
Is there any simple way with CSS to apply a border without affecting the size of the element? I have tried subtracting 2px from the width and height of the element as well as both negative and positive margins and paddings but they all seem to effect the size of the element in some way and I can't get it to remain constant as the new border is added.
I have also tried adding a new element and positioning it on top of the original element so that the border appears visually but is not actually on the original element. This works well but causes any content inside the original element to be hidden behind the new div so that it cannot be select (although it is still visible as the new div has no background-color).
I have tried playing with the z-index of both the original element and the new one on top of it but couldn't get that to work well.
Can anybody think of a way that this might be achieved without effecting the current elements on the page?