Is there a way to put a border inside an Element instead of Outside?

Question

Im working with jQuery and CSS. When I use a mouseenter event for an image (to put a border around the image), the layout gets tweeked because of the outside border, which makes it pretty ugly. I was just wondering if there's a way to put the border inside of the img so that the img container remains the same size and doesn't affect the layout. The only thing I can think of is to resize the image in the mouseevent, which just seems like a lot of work (figuring out sizes, especially considering responsiveness), and I can see a lot of problems arising from doing this.

Answer 1

Actually you cannot use border property for having a border inside an element, workaround for this is to use box-shadow set to inset

div {
    height: 200px;
    width: 200px;
    box-shadow: inset 0 0 1px #000;
}

Demo (This will generate a blurred border, to get a nice solid one, refer the demo below)

---

Get some more solidity

div {
    height: 200px;
    width: 200px;
    box-shadow: inset -1px 0 0 red, inset 0 -1px 0 red, inset 1px 0 0 red, inset 0 1px 0 red;
}

Demo

Answer 2

Adjusting the padding works.

#something {
    padding: 12px;
}
#something:hover {
    padding: 8px;
    border: 4px solid #FF0000;
}

box-shadow is not supported in older browsers.

See this JSFiddle.