4

I need to make round corners, when i am trying like this its working in firefox and chrome but not in IE. 

#tab_labels div {
   border-top-right-radius:4px;
   border-top-left-radius:4px;
   -moz-border-radius-topleft: 4px;
   -moz-border-radius-topright: 4px;
}
Damon Bauer
  • 2,718
  • 1
  • 22
  • 35
Noname
  • 61
  • 1
  • 2
  • 8
  • I got a quick question. Today I actually first learned about this `border-radius` and put it, it works perfect with my Firefox (8.0). What is the need for `-moz-border-radius*` then? Is it for older versions of Firefox? – Shahbaz Nov 17 '11 at 17:40
  • Also, look [here](http://github.github.com/github-flavored-markdown/) If you can see round borders in IE, it means it works and you can check out the style sheet to see how they have done it – Shahbaz Nov 17 '11 at 17:41
  • which version of IE is not support because IE8 & below are not support css3 properties – sandeep Nov 17 '11 at 17:41
  • @Shahbaz the `-moz` prefix is used when support is still being developed, is in testing, or if the spec might change. – LoveAndCoding Nov 17 '11 at 17:41
  • Isn't `-moz` prefix also used for some older versions of Firefox? – Damon Bauer Nov 17 '11 at 17:47
  • @motoxer4533 Yes. Older versions of Firefox will include that usually because of one of the above reasons. Also, one I forgot to note is if it is a browser extension that is not in the standards. Microsoft has a lot of these with it's `-ms` prefix. Well, starting in IE 8 their extensions now use the `-ms` prefix (like `-ms-filter`). – LoveAndCoding Nov 17 '11 at 17:51

5 Answers5

6

Currently, IE 9 and 10 are the only versions of IE that support border-radius. IE 8 and below do not support border-radius. You'll need some 3rd party help, like CSS3Pie, to do that.

Damon Bauer
  • 2,718
  • 1
  • 22
  • 35
  • what does CSS3Pie?? What will it do? – Noname Nov 17 '11 at 17:38
  • 1
    From the site linked in my answer: PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. – Damon Bauer Nov 17 '11 at 17:39
  • 1
    IE 8 and below does not. IE 9 supports `border-radius` – LoveAndCoding Nov 17 '11 at 17:39
  • The OP didn't specify which version of IE they are using. Since the border-radius attribute didn't work from their code sample, it's safe to assume they're not using IE 9 or 10. – Damon Bauer Nov 17 '11 at 17:41
  • @motoxer4533 yes, likely. But it might be something you want to note. Add it and I'll upvote :) – LoveAndCoding Nov 17 '11 at 17:43
  • @motoxer4533 I have PIE and testing in IE. Normally, the border-radius works fine but when I try to clone() it, the border-radius doesn't clone. Any ideas? – triplethreat77 Mar 05 '13 at 20:18
  • 1
    @triplethreat77 - have a look here: http://stackoverflow.com/questions/5455712/how-to-properly-clone-jquery-an-element-that-has-style-applied-through-pie and http://css3pie.com/forum/viewtopic.php?f=3&t=914 – Damon Bauer Mar 05 '13 at 20:45
2

If you really want to start using CSS3.

You should really know that IE sucks.

Actually not only for CSS3. Just generally IE sucks.

So IE (up to 9) doesn't support rounded corners by default.

You should either use images / resort to some 3rd party stuff.

PeeHaa
  • 71,436
  • 58
  • 190
  • 262
1

you can use the below meta tag to activate some CSS properties in IE. i use this tag and have no such problems.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Martin Prikryl
  • 188,800
  • 56
  • 490
  • 992
Arash Farahzadi
  • 41
  • 2
1

border-radius will work in IE9, only not in versions below that (IE8, IE7, ...)

Beatriz Oliveira
  • 659
  • 3
  • 5
0

Take a look to PIE

Example:

#yourdiv{
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    behavior: url(PIE.htc);
}
Coda Tavern
  • 21
  • 3