views:

214

answers:

2

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. Example: http://cndg.us/3f41a0

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

A: 

Nope, not possible right now. The two properties don't really play nice with each other. I'd recommend using CSS for the rounded corners and an image-based solution for the drop-shadow if you simply MUST have rounded corners with a drop-shadow.

Tim Hettler
Completely false... It is very possible right now.
Andrew Moore
Yeah, okay. Just make sure the nested elements have a transparent background.
Tim Hettler
+5  A: 

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/

meo