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>

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>

• javascript
• html
• css
• rounded-corners

• Beside that, I had try to insert external file like (ie-css3.htc) inside my css. It's working with div element, but not for hover element. here my code .abc:hover { background-color: lightblue; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; behavior: url(ie-css3.htc); /*for IE*/ } – Always21 Commented Apr 11, 2011 at 8:43

4 Answers 4

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 ment: 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.

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

You might check the patibility 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

Try this. It will work for IE9

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

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