css - CSS3 border radius problem with Chrome, Opera, Safari -
i ran problem when trying add rounded corners divs , can't seem find solution. i'm using css class assigned divs:
-moz-box-shadow: 0px 5px 5px #cccccc; -webkit-box-shadow: 0px 5px 5px #cccccc; box-shadow: 0px 5px 5px #cccccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
the following how shows in chrome, safari , opera:
and here how displays in firefox , ie9:
it looks if background in chrome , others somehow clip on the background color in top border. css associated colored top border is:
border-top:8px solid #333333;
any ideas?
check fiddle in various browsers:
when remove border-radius
, goes normal. may have discovered bug in webkit , opera implementations of border-radius
. check if hasn't been reported , if not, might want report :).
[edit]
i'm quite bug.
- it manifests in chrome & opera
- the bug looks different in chrome , opera
- the buggy part related width of border exceeds value of border-radius (ie, border-radius:10px , border width 10px, it's fine)
- the correctly rendered part wide value of border-radius.
i'm positive should reported both opera , webkit teams.
Comments
Post a Comment