Border-radius in IE8?

HTML & CSS
1

Does IE8 support border-radius?

I have this and it’s working great for FF + Safari -

.txtbox {-moz-border-radius: 30px 30px 0 0; /* FFx - TopLft, TR, BR, BL*/
-webkit-border-top-left-radius: 30px 30px; /safari/
-webkit-border-top-right-radius: 30px 30px;
}

What other browsers have implemented radius? and what’s their code?

I can’t use gif or png for round corner because I need padding in the box.

thank you - Val

2

I pretty much use what you’ve got there and just wait for the browsers to catch up. Except, one of the browsers (FF or Saffy I forget) can’t use just any px amount for the degrees. Someone was limited to increments of 15 or only certain numbers at all. I forget who and always use the same numbers : )

You cannot use border radius at all for anything that MUST have rounded corners. It’s just an “extra” for people using certain browsers, and since the -mox and -webkit prefixes are actually used for testing while vendors are working on a property, don’t be surprised if one day a new FF or Saffy comes out and no longer work the same with that code.


 border: 1px solid #fff;
 -moz-border-radius: 20px;
-webkit-border-radius: 15px;
border-radius: 15px;

There is an actual border radius that you could always set after your vendor code. It will be invalid because the validator only looks at css2.1 and under. Whenever browsers begin to support this property it will be “border-radius” itself.

Padding itself shouldn’t be a problem to using images. Maybe post your situation and code.

3

border-radius does not work in IE8 and there is no current schedule for when/if it will.

4

Hi,

The proprietary mozilla border-radius differs from the specs so be careful how you use it because it will not match the correct definition. This is explained in the reference here.

As mentioned above there doesn’t seem to be any chance of ie8 getting it very soon either.

5

Hi Paul - thank you! I’ve added a last line for CSS3

.txtbox {-moz-border-radius: 30px 30px 0 0; /* FFox - TopLft, TR, BR, BL*/
-webkit-border-top-left-radius: 30px 30px; /safari/
-webkit-border-top-right-radius: 30px 30px;
border-radius: 30px 30px 0 0 0 0 30px 30px; /* TR, BR, BL, TL */
}

I put in all the values in case I add round corners to bottom one day, and to remind me FF starts at TopLft but CSS3 at TopRgt.

By adding this line, do I no longer need to keep up with what browsers are doing? As soon as they include the CSS3 std, my code will work with them?

Do I need to worry that FF will switch to CSS3 elliptical std then 30px 30px 0 0 will no longer work because it’s expecting 8 values?

Stomme - padding has to be 0 when you use gif or png for rounded corners.

thanks! - Val

6

Not at all - negative margins on the corner images/holders can cater for padding or borders.

7

Hi!.

Once they add support for properties you are able to use them. Assuming of course that you have the proper version installed that has support for their properties.

It is a good option to generally keep up with what the main browsers are doing. If at some point you notice that code not working when you know that they have support for the given property then do some researching. It may be that they changed how you are supposed to use the property.

8

The problem is that CSS3 is also in draft and subject to change and in fact the info I linked to previously has now changed and the cSS3 shorthand radius now matches the mozilla shorthand!

http://www.w3.org/blog/CSS/2007/09/25/beijing_part_4
http://www.w3.org/TR/css3-background/#the-border-radius

You will need to amend your css3 styles to match.

9

One of the problems with a specification still being a draft is that it is subject to change but browsers still need to be able to test the current draft in their browser in order to see if the draft is going to work.

That’s what the -moz- -webkit- -op- and -ie- prefixes are for - to allow browsers to experimentally implement CSS that will not conflict with the final implementation if the draft changes in between.

10

Thank you - this is great, esp Paul’s good news from Beijing and Stomme’s negative margins on the corner image :slight_smile:

Val

11

Er, I was thinking them but it was Centauri who actually said it : )