Home/ Questions/Q 8824831
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:43:54+00:00

http://jsfiddle.net/eE4Y2/2/ I’m trying to use css to create a rounded, folded corner illusion for

  • 0

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>
    <div class="example"></div>
</body>



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;   
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    <div class="example">
    <div class="operaFix"></div>
</div>

    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.

    • 0