cssbordertransparency

How do I make a transparent border with CSS so that contents don't shift position?

I have an li styled as follows:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;
}

When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?

Solution

  • You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.

    border: 10px solid transparent;

    Link to archived blog post on researchkitchen.de.

    As a color, "transparent" is mentioned on MDN as a special keyword value.