I'm trying to show a border around an element when the mouse is over it, and no border when the mouse is removed. That's easy. What I'm having trouble doing is changing the style of the given element such that the element size is reduced by the thickness of the border on each side.

Problem: When you add a border to an element, the border makes the element bigger. I don't want the element to be bigger because of the border.

Solution: To solve this, I tried reducing padding on each side by the amount of the border thickness to be added. But it doesn't work. Changing padding or spacing does not seem to reduce the element size. When the border is added, it still resizes the element on the screen.

The ugly effect of the element "growing" and "shrinking" as border is added and removed is what I'm trying to avoid.

You might consider setting the "clip" property. Unfortunately, this requires absolute numbers.

Example:

<element style="position: absolute; clip: rect(0 0 100 100)"></element>

The alternative to rect is auto, which is the default.

I'll try it, but it sounds as if I used clilp, then the border would not show when applied afterwards.

do something like this maybe
<element onmouseover="style.borderColor='#000000';" onmouseout="style.borderColor='#cccccc';" style="border:1px solid #cccccc; background-color:#cccccc;" />
This would be one way to do it, but that is java script so it is not going to work for 6 - 13% of the internet.
But also you can make an <a> tag display as a block level element with display:block; and use a hover link basically, with ns and opera you can use hover in div's and spans etc, but on ie you can only use it with the a tag. Notice I am not actually removing the border just changeing the color so it seems to disappear.