0

I cannot seem to get a border radius no matter what I do. I am running the latest internet explorer and nothing is happening. I have gone into the developer tools and set the rendering to ie9 and it still refuses to read:

  border-radius: 4px;

As far as I understand, ie9 does in fact support this CSS3 element. Am I do doing wrong? I am trying to get the browsers to see more or less the same page. Any suggesions? Any help is greatly appreciated!

Serguei Fedorov
  • 7,763
  • 9
  • 63
  • 94
  • 2
    Check http://stackoverflow.com/questions/5321224/ie9-border-radius-shorthand-not-supported and http://stackoverflow.com/questions/10784999/border-radius-not-working-in-ie9 and http://stackoverflow.com/questions/5381446/ie9-border-radius and http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie ! – Aziz Aug 08 '12 at 21:56
  • 1
    To clarify: you need to add ` ` to the top of your page OR add `` inside the `` tag. This will tell IE9 that you actually want to use the standards mode (with CSS3 and stuff). – Aziz Aug 08 '12 at 22:15

3 Answers3

0

Try adding some of the following:

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

Be sure that these items are in the correct css class you are trying to apply to the form element.

Savanetech
  • 206
  • 2
  • 8
  • webkit and moz have absolutly nothing to do with IE, they stand for safari/chrome and mozille. And adding the extra zero's actualy produces a different effect... – Pevara Aug 08 '12 at 22:22
  • AND the standard-conform declaration always should be the last one. – Christoph Aug 09 '12 at 08:23
0

I recommend you to define all border properties. Here is an example;

input{
border: solid 4px #06C;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
height: 40px;
width: 100px
}

Here is a working Live Demo, running smooth in my IE9.

Note: Here is a list of browsers supporting CSS3 and others will not.

Alfred
  • 21,058
  • 61
  • 167
  • 249
-1

YOU have a website for create border-radius css code

border-radius : 4px; // for new ie, opera, chrome, firefox

is a new W3C specification for new browser,

if you can use border radius for old browser, you can use 

-webkit-border-radius : 4px; // for old chrome, old safari
-moz-border-radius : 4px;  // for old firefox
-o-border-radius : 4px;  // for old opera version

for old ie version, you want to use CSS3PIE.

Doc Roms
  • 3,288
  • 1
  • 20
  • 37
  • 2
    YOU need to [do more research](http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie). Your proposed solution won't help IE8 at all, and IE9 supports rounded corners natively without a prefix. – Bojangles Aug 08 '12 at 22:12
  • I know, I've edit my answer for specify old ans new browser, but, IE9 is a NEW ie browser... it's normally to support border-radius... and I have explain with CSS PIE, border radius was supported with IE 7, 8... – Doc Roms Aug 08 '12 at 22:17