Home/ Questions/Q 4614476
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:42:20+00:00

I ran into this problem when trying to add rounded corners to some divs

  • 0

I ran into this problem when trying to add rounded corners to some divs and can’t seem to find the solution. I’m using this css for the class assigned to the 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 is how it shows up in Chrome, Safari and Opera:

Chrome, Opera, Safari output

And here is how it displays in Firefox and IE9:

Firefox, IE9 output

It looks as if the background in Chrome and the others somehow clip over the the background color in the top border. The only css associated with the colored top border is:

border-top:8px solid #333333;

Any ideas?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Check this fiddle in various browsers:

    http://jsfiddle.net/QVS9X/

    When you remove border-radius, everything goes back to normal. You may have discovered a bug in Webkit and Opera implementations of border-radius. Check if it hasn’t been reported and if not, you might want to report it :).

    [EDIT]

    I’m quite certain this is a bug.

    1. It only manifests itself in Chrome & Opera
    2. The bug looks different in Chrome and Opera
    3. The buggy part is related only to the width of the border that exceeds the value of border-radius (ie, for border-radius:10px and border width 10px, it’s fine)
    4. The correctly rendered part is as wide as the value of border-radius.

    I’m positive it should be reported to both the Opera and Webkit teams.

    • 0