A while ago i made a little page for myself and I stumbled upon a bug that a have since not been able to answer.
When opening http://darngoodpictures.com/#showme you see navigation arrows on the left and on the right side. These are completely CSS-made. Nowadays I would go another way, but it's done and I'm sticking to it :)
In every browser I tested, the arrows looked like they should. The only exception is Opera. Opera renders the arrows in a way I have never seen before. Can anyone explain what is happening there? I figured out quite quickly that Opera has some issues with the border-radius-property of the arrows, but can anyone give more precise information? This behaviour is so weird...
EDIT: It is getting weirder and weirder. Originally I thought, my CSS in combination with border-radius somehow triggered the issue, but the problem IS border-radius. It gets intensified when border-width is being combinated with it. See the following jsfiddles:
I: http://jsfiddle.net/62ujn/ (everything is rendered as one might expect)
Key rules:
border-radius: 0;
border-width: 200px;
II: http://jsfiddle.net/62ujn/1/ (first minor problems in Opera)
Key rules:
border-radius: 50px;
border-width: 200px;
III: http://jsfiddle.net/62ujn/2/ (up from here the rendering in Opera just gets ridiculous)
Key rules:
border-radius: 50px;
border-width: 200px 150px;
IV: http://jsfiddle.net/62ujn/3/
Key rules:
border-radius: 50px;
border-width: 200px 150px 100px;
V: http://jsfiddle.net/62ujn/4/
Key rules:
border-radius: 50px;
border-width: 200px 150px 100px 50px;
Strange. Very. Strange.
EDIT 2:
I just contacted Opera about this, as I suspect that there is no other answer than "Opera-Bug"... I'll keep this page updated when I get an answer that satisfies :)
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working.
With CSS3, you can give any element “rounded corners” by using the border-radius property. The value can be in any valid CSS length unit.
.round {
-o-border-radius topleft: 30px; **//for Opera and Iphone5 Mobile**
-o-border-radius topright: 30px;
-o-border-radius bottomleft: 30px;
-o-border-radius bottomright: 30px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With