Draw a border on top of a div - html

Question

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)...

Answer 1

Box shadow with inset:
.box:hover {box-shadow: inset 0 0 0 5px red;}
see the jsfiddle for further explaination

Answer 2

http://jsfiddle.net/KGXYR/6/
div {
background: green;
width: 100px;
height: 100px;
outline: thick solid #00ff00;
outline-offset: -6px
}
outline
outline-offset
Update:
http://jsfiddle.net/XKAVF/
.box{
width: 200px;
height: 100px;
background: #333;
}
.box:hover{
outline: thick solid #00ff00;
outline-offset: -5px
}

Answer 3

CSS border without affecting layout margins, paddings, width or height:
div {
width: 100px;
height: 100px;
background: yellow;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
border: 10px solid transparent;
}
div:hover {
border: 10px solid red;
}
See my fiddle

Answer 4

You found your solution box-sizing:border-box;. Just make sure you include -webkit and -moz-box for other browsers, like this:
div {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Take in mind that box-sizing is a CSS3 property and won't work in IE7 and IE6.
Here's more on the topic: How CSS Box Model Works
Cheers,
Hope that helps you.

Answer 5

You could use box-shadow for that. Example (jsFiddle):
box-shadow: inset 0 0 0 5px red;
Will draw a 5px red border at the inner the div - without changing position, height, etc.
Also don't forget to add the various browser prefixes (like -webkit-, -moz, -o-), I just left them for simplicity.
Edit:
The advantage compared to border-box and outline is, you can animate it very well:
box-shadow: jsFiddle vs border-box: jsFiddle

Answer 6

I'm not sure why box-sizing isn't working for you, but perhaps faking it with a pseudo-element will work:
div {
background-color: #6af;
width: 10em;
height: 5em;
}
div:hover::before {
content:'';
display: block;
width: 100%;
height: 100%;
border: thick solid green;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
jsFiddle
This is an interesting article about pseudo-elements: A Whole Bunch of Amazing Stuff Pseudo Elements Can Do