Question

I want to create a link with the rounded corner effect.
However, the rounded corner effect will show while hover only.
By using CSS3, it’s working fine on mozilla, chrome and Safari, but not in IE.

Here my css

a {
color: black; background-color:#ddd;
text-align: center;font-weight: bold;
width:110px; height:25px;
padding: 10px; text-decoration:none;
}

.abc:hover {
background-color: lightblue;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}

Here my html

<a href="#" class="abc">Button</a>

Answer 1

As @Michael Rose says, IE8 and lower simply do not support CSS3 rounded corners.

There are a variety of workarounds to apply rounded corners in these versions of IE.

To my knowledge, the best of these workarounds is CSS3 PIE.

See another relevant answer I wrote:

Is .htc file a good practice in older versions of IE for rounded corners like CSS3 has?

---

Edit in response to your edited comment: I’m reasonably sure CSS3 PIE supports :hover properly.

---

Edit 2:

I just tried it, this CSS works:

a {
    color: black; background-color:#ddd;
    text-align: center;font-weight: bold;
    width:110px; height:25px;
    padding: 10px; text-decoration:none;
    behavior: url(PIE.htc);
}

.abc:hover {
    background-color: lightblue;
    -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;
}

To make it work, I moved the behavior property to the a block instead of the .abc:hover block.