9

I would like to know how to make rounded border in IE8. I'm using

-moz-border-radius:4px;
-webkit-border-radius:4px;

for mozilla and safari.

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
kst
  • 1,498
  • 3
  • 19
  • 34
  • Here's how you can do it with PURE CSS and WITHOUT JAVASCRIPT. It's a gong show, and easy to break, but none the less, here it is. [Pure CSS rounded corners without images and javascript](http://www.worthapost.com/articles/pure-css-rounded-corners-without-images-and-javascript) – Chase Florell Nov 09 '10 at 05:02

5 Answers5

6

There's a jQuery plugin for that. http://jquery.malsup.com/corner/

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • 1
    He didn't ask how to do it without CSS or with javascript. – Rob Nov 09 '10 at 04:20
  • 3
    @Rob: the other answers have already explained that it's not possible to implement in pure CSS for IE8. – Matt Ball Nov 09 '10 at 04:21
  • 6
    I see that @kst marked this as "answer" because it solved his problem... however the "right" answer is.. "you cannot do rounded corners purely with CSS in IE8 the same way you can in FF, Chrome, Safari, or IE9. – Chase Florell Nov 09 '10 at 04:40
  • The question does not ask for a pure CSS method it is simply tagged with CSS so I think the answer kst has selected is more than adequate. – Otis Wright Sep 13 '13 at 03:05
3

Download https://code.google.com/p/curved-corner/ and include in your project. Then use the following css to have rounded corner.

For example:

.somediv{
   -webkit-border-radius:4px;        /* older webkit based browsers */
   -khtml-border-radius:4px;         /* older khtml based browsers */
   -moz-border-radius:4px;           /* older firefox */
   border-radius:4px;                /* standard */
   behavior: url(border-radius.htc); /* IE 6-8 */
}

The url to the file is relative to the HTML file which loads the CSS. So this is different to background: url(...) behavior which is relative to the CSS file. More details here

F Lekschas
  • 12,481
  • 10
  • 60
  • 72
zdesam
  • 2,936
  • 3
  • 25
  • 32
1

You can't. IE doesn''t handle modern standards and practices and, specifically, no such CSS property exists in IE8.

Rob
  • 14,746
  • 28
  • 47
  • 65
  • You **can** do it in CSS, it's just a huge pain in the neck (far too many div tags). Alternatively, you use CSS and round corner images. – Chase Florell Nov 09 '10 at 04:44
0

You can use CSS3 PIE for this. It's easy to implement. Just download it here: http://css3pie.com/download/ and extract its contents. Then, on your stylesheet, just put behavior:url(css3pie/PIE.htc); along with the css codes of each element that uses border-radius.

For example:

.samplediv{
    behavior:url(css3pie/PIE.htc);
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;       
    -moz-border-radius:10px;           
    border-radius:10px;               
}
maikelsabido
  • 1,253
  • 4
  • 18
  • 37
0

In IE9 you can use border-radius.

For the older IE versions, there are javascript libraries that will do it for you. You can't do it purely with CSS. At the very least you will need background images.

Moshe
  • 57,511
  • 78
  • 272
  • 425
  • You **can** do it purely in CSS, it's just a huge hack and a pain in the neck (far too many div tags). Alternatively, you use CSS and round corner images. – Chase Florell Nov 09 '10 at 04:44
  • @rockinthesixstring - Really? I guess if you added enough divs, with block and background-color... – Moshe Nov 09 '10 at 04:47
  • I've seen it done... it's brutal to implement and easy to break. – Chase Florell Nov 09 '10 at 04:58
  • 2
    here's the nonsense I'm talking about http://www.worthapost.com/articles/pure-css-rounded-corners-without-images-and-javascript – Chase Florell Nov 09 '10 at 05:00
  • @rockinthesixstring - I figured it was something of the sort. Not exactly round, but close enough. – Moshe Nov 09 '10 at 05:02