border radius not working in opera browser-11.1

i am writing an application using html,css and javascript. i have set border radius of button to have rounded corner 开发者_如何学Gobut which is not working in opera browser. but same i have tested in chrome it works. please do give some suggestion or help on this. here is demo

Rounded Corner or all browser you want to use folloing method

#divId{
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
  -o-border-radius: 20px;
}

Its work for me perfectly.

Unfortunately the Border-radius css style is not fully cross-browser supported. Opera is one browser that does not offer support.

See: http://www.westciv.com/iphonetests/

First, did you try -o-border-radius? Second did you try on a plain div? Sometimes form elements reject certain styles. Otherwise it isn't support (opera10 didn't have it).

Border radius in Opera with other demos related to Opera.

button {
 background:#000;   
 color:#fff;
 border-radius: 15px;  
}

In Opera you can use this:

.className {
  -o-border-radius: 3px;
}

I ran into the same problem and found out that although border-radius is supported in Opera, it doesn't quite work with buttons.
But I managed to make it work, and achieved almost the same results. Here's my solution. Just recreate behavior of the button with following style:

button {
  background-color: #ccc;
  border-style: outset;
  border-color: #eee;
  border-radius: 6px;
}
button:hover, button:active, button:focus {
  background-color: #ddd;
}
button:active { border-style: inset; }

The thing is, that border-radius works, when you change border-style property. The behavior of Firefox, for example, when you just use border-radius, looks like it's using border-style: outset for normal behavior of button, and border-style: inset, when the button is clicked.
There are only 2 extra lines to make it work in Opera almost the same way as in other browsers.