border radius not working in opera browser-11.1 - html

Question

i am writing an application using html,css and javascript. i have set border radius of button to have rounded corner but 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

Answer 1

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.

Answer 2

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/

Answer 3

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).

Answer 4

Border radius in Opera with other demos related to Opera.
button {
background:#000;
color:#fff;
border-radius: 15px;
}

Answer 5

In Opera you can use this:
.className {
-o-border-radius: 3px;
}

Answer 6

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.