Creating rounded corners in IE7 / IE8

Question

I am creating a rounded corners tabs, that works fine in IE9, Mozilla and Chrome, but not in IE7/IE8.

Here is the code:

<div id="navbar">
<div id="holder">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">News</a></li>
</ul>
</div>
</div>

#navbar {}
#holder {
border-bottom:1px solid #000;
overflow:hidden;
}

#navbar #holder ul {
margin:0;
padding:0;
list-style:none;
margin-top:15px;
}

#navbar #holder ul li { }
#navbar #holder ul li a {
text-decoration:none;
float:left;
margin-right:5px;
border:1px solid #000;
padding:15px;
text-align:center;
width:90px;
border-bottom:none;
display:block;
behavior:url(border-radius.htc);
border-radius:5px 5px 0 0;
}

#navbar #holder ul li a:hover {
background:#C09;
color:#fff;
}

Can you please let me know the code so that it works for IE7/IE8 as well?

I've always kind of liked Spiffy Corners: http://www.spiffycorners.com/ — Joel Etherton, Aug 04 '11 at 12:11
Can you please post the contents of the border-radius.htc. Or better still, don't use one. I have found more often then not, .htc files prove to be more trouble then helpful. You can try this jquery plug in...http://jquery.malsup.com/corner/ — LeeR, Aug 04 '11 at 12:12

score 8 · Answer 1 · answered Aug 04 '11 at 12:18

8

Use jquery corner , it will work on all major browser

http://jquery.malsup.com/corner/

You can even configure the corners the way you like!!

answered Aug 04 '11 at 12:18

Vijay

5,331
10
54
88

Works great except the rounded corner cutoff background needs to be transparent. For me it's a light blue color which doesn't go with my background image – Si8 Feb 25 '14 at 14:44

score 7 · Accepted Answer · answered Aug 04 '11 at 12:18

7

IE 7/8 do not support border-radius. I hear IE9 does though.

This site contains a hack for getting rounded borders in IE7/8 though: http://dimox.net/cross-browser-border-radius-rounded-corners/ . You'll need to download border-radius.htc and put the following code in your CSS:

.rounded-corners {
  behavior: url(http://yoursite.com/border-radius.htc);
}

answered Aug 04 '11 at 12:18

tskuzzy

35,812
14
73
140

1

ie-8 and 7 supporting border radius via javascript check this link working border radius in ie7-ie8 http://davidwalsh.name/css-rounded-corners – CSS Guy May 31 '12 at 05:17
If I have a opacity anything less than 100%, the background image becomes boxes and not plain. Is that an issue? – Si8 Feb 25 '14 at 14:35

score 5 · Answer 3 · answered Jun 05 '12 at 19:31

5

There are following solutions :

CSSPie (http://css3pie.com/ but its compressed js file is 40 KB in size)
There is another solution using htc file for IE
```
    behavior: url(http://yoursite.com/border-radius.htc);
         (almost 40 KB of size)
```
The guide can be found here http://dimox.net/cross-browser-border-radius-rounded-corners/
Another solution that I personally recommend is :
```
     jquery.corner.js (http://jquery.malsup.com/corner/) 
```
It's uncompressed js file is 10 KB in size.

answered Jun 05 '12 at 19:31

sudip

2,781
1
29
41

I have tried every solution and the only one that creates border-radius equals modern browsers is CSSPie, all the other options has it issues. The only bad thing in CSSPie is that it make IE8 very slow – Gabriel Gartz Jan 03 '14 at 05:00

score 2 · Answer 4 · answered May 31 '12 at 05:06

2

border radius supported ie-7, ie-8, ie-9 via javascript check this tutorial how to show border radius in ie http://davidwalsh.name/css-rounded-corners

answered May 31 '12 at 05:06

CSS Guy

1,978
3
18
27

score 0 · Answer 5 · answered Aug 04 '11 at 12:22

0

The Internet Explorer supports the CSS border-radius property natively not until version 9. For lower version of IE, check the jQuery plugin kvijayhari mentioned, jQuery Corner.

answered Aug 04 '11 at 12:22

Marius Schulz

15,976
12
63
97

Creating rounded corners in IE7 / IE8

5 Answers5

Linked