views:

52

answers:

2

I am trying to get the border radius property to work properly on a fieldset in Opera 10.6, but it does not appear to be working correctly.

Here is the html:

<form method="post" action="character.php" class="form">
    <fieldset>
        <legend>Insert</legend>
        <label for="txtCharacter">Character</label>
        <input type="text" id="txtCharacter" name="txtCharacter" />
    </fieldset>
</form>

Here is the css I am trying to use:

.form fieldset {
    background-color:#355e3b;
    margin:0px;
    border:3px solid #635147;

    /* Adds the rounded border effect. */
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

The above works perfectly in Firefox and Safari, giving a me a rounded fieldset with desired border shape/size/color and the correct background color:

Safari

Opera gives me the correct colors, but the borders are square:

Opera1

However, if I take the line specifying the border (border:3px solid #635147;) then Opera gives a rounded fieldset just as it is supposed to:

Opera2

What's going on here? Why won't Opera display the border-radius when a border is selected? Thanks!

+1  A: 

That's probably a bug in their rendering engine.

Savageman
I wondered that too, I was just curious if anyone else had noticed it.
Jason Watkins
I just filed a bug report on their site. Maybe Opera 10.7 will works as expected. ;)
Savageman
@Savageman, Good idea! Thanks!
Jason Watkins
+1  A: 

There are a few well know issues with rounded corners on input elements in Opera, possibly one of the workarounds people have discovered for that would work on your fieldset.

robertc
@robertc, Thanks, I appreciate the input. I at least feel like I'm not crazy now!
Jason Watkins
Yeah, it's good to have resources on such things. However, the bug mentioned is fixed now (I just tried).
Savageman