Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

border-radius rendering strangely in opera (fine in chrome, firefox)

border-radius rendering strangely in opera (fine in chrome, firefox)

Problem

http://jsfiddle.net/eE4Y2/2/

I'm trying to use css to create a rounded, folded corner illusion for a div.

I cannot figure out why this fairly simple html/css renders strangely in Opera (v.12.10) but looks fine in chrome and firefox. When I apply a border-radius to the div, a strange notch appears within the border, on opera only. Please see the jsfiddle above to see an example.

I'd love to hear a fix or at least an explanation as to what's going on with Opera in this case.


    
body { background-color: gray; padding: 50px; } div.example { border-bottom-left-radius: 10px; border-color: transparent transparent white white; border-style: solid; border-width: 30px; display: block; width: 0; height: 0; }
Problem courtesy of: user1411430

Solution

It seems to be an opera bug. So you can fix it manually by putting another div in front of the glitch http://jsfiddle.net/aN4XP/

Here the additional css:

div.operaFix
{
    border-bottom-left-radius: 10px; 
    border-color: white;
    border-style: solid;
    border-width:10px;
    display:block;
    margin-left:-30px;
    margin-top:10px;
    width: 0;
    height: 0;   
}

Other browsers should not be affected of this.

Solution courtesy of: Varon

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

border-radius rendering strangely in opera (fine in chrome, firefox)

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×