csswebkit

Using border-radius and box-shadow together (CSS)


Ok, I know neither of these properties are completely supported yet, but I'm using them anyway :P

When I add a border-radius and box-shadow (with and without vendor prefixes), the radius of the border-radius is not transparent to the box-shadow.

Is this possible to fix? I've also noticed that -webkit-box-shadow has some issues with hidden divs.


Solution

  • it is possible check here: http://jsfiddle.net/Zw4QA/1/

    i think you have a element inside your div with the rounded corders. You have to apply the corners to this element to. At the moment rounded corners on the parent element will not apply to the children unless you specify it in your CSS.

    for more CSS3 magic check this link: http://css3please.com/

    Be aware that every single browser has his own way of handling Shadows and border radius http://thany.nl/apps/boxshadows/