How to implement “Rounded Corner on hover effect”

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:#ffffd;
    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.

Answer 2

It's simply because rounded borders are only implemented in IE9 and not below.

Answer 3

You might check the compatibility with IE9, just add

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

to your page header and it's going to work, hopefully isA

Answer 4

Try this. It will work for IE9

<div class="rounded" style="background:#ffffd"></div>

.rounded {
  height: 100px;
  width: 100px;
  margin-right: 20px;
  padding: 5px;
  border:2px solid #404040;
  border-radius: 5px;
}