Right side of fieldset jagged in IE

Question

I have the following HTML :

<div class="body-content">
    <fieldset class="EntryFieldSet">
        <legend id="ScreeningTitle"> Screening:</legend>
        <br/><br/>
    </fieldset>
</div>

And the following CSS :

.body-content {
    width: 300px;
    border: 1px solid black;
    background-color: #F5F5F5 /*whitesmoke*/;
}
.EntryFieldSet {
    width: 250px;
    padding-left: 15px;
    overflow: hidden;
}

jsFiddle

In Internet Explorer , the right side is jagged

But it appears just fine in Chrome

How can I fix it for all browsers / internet explorer?

EDIT - This issue is happening for me in IE 9 64-bit edition

Answer 1

I have improve the bug just a little bit..

 .EntryFieldSet {
        width: 250px;
        padding-left: 15px;
        overflow: hidden;
        border-top-right-radius: 3px;
        -webkit-top-right-radius: 3px;
        -moz-border-top-right-radius: 3px;
        border-top-right-radius: 0px\9;
        border-top-right-radius: 0px\0/;

    }

Answer 2

I think the best way would be to override the default css. Here is what worked for me

.EntryFieldSet {
   border-radius: 0px;
   -moz-border-radius: 0px;
   border: solid 1px darkgray;
}

This way, it displays uniformly and with the same color across all the browsers

jsFiddle

Answer 3

By applying a zero border-radius to the fieldset, I was able to get it to stop trying to apply one by browser default, so now it renders properly

.EntryFieldSet {
    /* other properties */
    -moz-border-radius: 0px;
         border-radius: 0px;
}

jsFiddle

Example: