IE9 fieldset rounded corners

Question

I cannot seem to make IE9 render a fieldset with rounded corners whereas other browsers do. Has anyone encountered this too ?

Repeat:http://stackoverflow.com/questions/635851/support-for-border-radius-in-ie — tcooc, Jan 03 '11 at 12:39
@digitalFresh: have you read the question? it's about IE9 - and IE9 supports border-radius (as montioned in your link) — oezi, Jan 03 '11 at 12:55
You should report IE9 bugs at http://connect.microsoft.com/ie — i_am_jorf, Jan 03 '11 at 16:08
Sadly, yet unsurprisingly, nearly eight years later this is still an issue with IE11. — Antti29, Sep 18 '18 at 07:56
Does this answer your question? [Rounded corners on a fieldset](https://stackoverflow.com/questions/940191/rounded-corners-on-a-fieldset) — KyleMit, Feb 10 '20 at 21:33

score 23 · Answer 1 · answered Oct 26 '11 at 13:53

23

This happens only if you use <fieldset> with <legend> - without it the corners render ok.

You can fix this bug by applying display:inline or display:inline-block to your <legend> element - but than you have to reposition it back in place by setting position:relative and moving it around.

Depending how the styling of your legend looks like (with background it will look the same - without the background the border of fieldset will still be visible behind the letters) you can make it look pretty much the same as in other normal browsers.

answered Oct 26 '11 at 13:53

easwee

15,757
24
60
83

2

I found that while this did solve the issue in IE, it broke it in chrome. The positioning i had to apply to the legend to move it into the correct place moved it way to far in chrome, was fine in FF and IE though. As a work around i stuck the styles to fix it in IE in an IE only [IE only stylesheet](http://css-tricks.com/how-to-create-an-ie-only-stylesheet/). For the record, the style i used was: `display: inline-block; position relative; height: 30px; top: -15px;` – Ben Aug 02 '12 at 08:35
1

Obviously. This goes to an IE only stylesheet - the question is tagged as internet-explorer - this is a fix for IE - you always want to apply the fix to the buggy browser only. – easwee Aug 02 '12 at 08:48
3

Check this SO answer for an alternative solution floating `` http://stackoverflow.com/a/17406564/132599 – David Clarke Mar 27 '14 at 23:46

score 3 · Answer 2 · answered Oct 27 '12 at 19:27

I too used to use fieldset and for more than just forms, but the constant hit and miss on compatibility has caused me to dump them. Better to write your own CSS DIV Classes that emulate fieldset. Using CSS you can get an exact replica of what fieldset looks like and you have a lot more flexibility and compatibility

score 3 · Answer 3 · answered Feb 28 '11 at 03:11

3

From my experence in the latest version of IE9, I can not get a fieldset with legend to have a radius. I have not had any trouble with other borders in IE9, the css3 border-radius works just fine, just fieldset/ledgend. I'm still scratching my head over this.

answered Feb 28 '11 at 03:11

Irv Lennert

555
5
20

1

This seems to be a bug in IE9 release for fieldset + legend, which is irritating to say the least. – Tracker1 Jul 27 '11 at 18:23

score 1 · Answer 4 · edited May 23 '17 at 11:50

It is still problem under IE11 when using legend , and the solution is in this thread:

Rounded corners on a fieldset

 fieldset {
        margin:20px;
        padding:0 10px 10px;
        border:1px solid #666;
        border-radius:8px;
        box-shadow:0 0 10px #666;
        padding-top:10px;
 }  

legend {
        padding:2px 4px;
        background:#fff; 
    }


    fieldset > legend {
        float:left;
        margin-top:-20px;
    }
    fieldset > legend + * {
        clear:both;
    }

http://www.456bereastreet.com/archive/201302/fieldset_legend_border-radius_and_box-shadow/

score 1 · Answer 5 · answered Jan 22 '11 at 05:31

1

its only working in latest rc build , aint working in beta version of IE9 try


.class {
 border-radius-right-bottom: 15px;
}

answered Jan 22 '11 at 05:31

1

It is a good point to re-iterate -- IE9 is not a released product. It's in beta. Don't expect everything to work. And don't use it as your primary browser if you're not prepared for things to break unexpectedly. – Spudley Jan 24 '11 at 13:40

score 1 · Answer 6 · edited Feb 10 '20 at 21:32

1

You can add the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

edited Feb 10 '20 at 21:32

KyleMit

30,350
66
462
664

answered Nov 15 '11 at 21:33

bigbopper

11
1

score 0 · Answer 7 · answered Aug 02 '15 at 18:47

I had an access only to CSS file, so I could not make any changes in HTML, so I made the hack in CSS for IE.

HTML structure was:

<form>
  <fieldset>
      ...form content...
  </fieldset>
</form>

The whole CSS for all browers and with IE hack:

fieldset {
    border-radius: 20px;
    border: 1px #3D3D3D solid;
}
@media screen and (min-width:0\0) {
    form {
        border: 1px #3D3D3D solid;
        border-radius: 20px;
    }
    fieldset {
        border: 0 none;
        margin-top: 1px;
        margin-bottom: 1px;
    }
}

Of course, if your site has another html-structure, this will not work. Therefore instead "form" you can apply in css to a parent div of your fieldset.

score 0 · Answer 8 · answered Jan 05 '11 at 03:43

0

Fieldset rendering is always fraught with problems with rendering and particularly with printing. It's hardly surprising that it doesn't work.

The standard workaround is to add another container and style that.

answered Jan 05 '11 at 03:43

GlennG

2,982
2
20
25

Nasir · Answer 9 · 2011-01-24T14:18:12.327

0

To get IE9 to use rounded corners(CSS 3) you have to add this to the HTML header:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Then use CSS as normal: border-radius-right-bottom:15px;

I had the same issue & this fixed it.

edited Jan 24 '11 at 14:18

answered Jan 24 '11 at 13:19

Nasir

4,785
10
35
39

IE9 *should* support `border-radius` by default. If you need to use this, it means you have something in your settings that are making it flip into IE8-compatibility mode. You may want to check the settings. If you do use this technique, then you should be able to get away with just `IE=Edge`; the rest are irrelevant, since no other browser recognises `X-UA-Compatible` anyway, and even if they did, why would you want to force them to a given version number (you're fixing a quirk in IE here, not Firefox). – Spudley Jan 24 '11 at 13:39

IE9 fieldset rounded corners

9 Answers9

Linked

Related