Draw a border on top of a div

Draw a border on top of a div

OK, I can't explain what I really need so I'll show it.
Or... if I give it a try with words : I need a border, NOT around the div,
NOT changing anything (width, height, margins, padding - nothing...), just
as if it was drawn on top of the aforementioned div...
Example :

CSS : (targetting the elements with attribute comp-id - bordered state is
set with the msp-selected class)
[comp-id] {
cursor:pointer;
}
[comp-id] .msp-selected, [comp-id] .msp-selected:hover {
border:2px solid red;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
I've tried with border, outline, and box-sizing:border-box; but none of
the above maintains the layout.
So,... Any ideas how this can be achieved?



UPDATE (Here's what box-sizing - yep, ALL of them - does) :

Let's say we first highlight the upper element (add the border) and then
then bottom one - as you may notice, the border does affect the layout
(like if it adds padding or sth)...