Border radius does not work in Opera 11.1 browser

Question

I am writing an application using html, css and javascript. I set the border radius of the button to have a rounded corner, but which does not work in Opera browser. but the same one that I tested in chrome works. please give some suggestion or help on this. here is a demo

Answer 1

The rounded corner or the entire browser that you want to use with the following method

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

His work is excellent for me.

Answer 2

Unfortunately, the css frame style of css is not fully supported by the cross browser. Opera is one browser that does not offer support.

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

Answer 3

Did you try -o-border-radius ? Secondly, have you tried a simple div? Sometimes form elements reject certain styles. Otherwise, this is not support (opera10 did not have it).

Answer 4

The 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 that although Opera supports a border radius, it does not work with buttons.
But I managed to get it to work and achieve almost the same results. Here is my solution. Just recreate the button behavior with the 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 fact is that the border radius works when you change the border style property. Firefox's behavior, for example, when you just use border-radius, looks like this: border-style: outset for the usual button behavior and border-style: inset when the button is clicked.
There are only two additional lines to make it work in Opera in much the same way as in other browsers.