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

webkit css mozilla
Gary picture Gary · Apr 26, 2010 · Viewed 95.6k times · Source

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.

Answer

meo picture meo · Apr 26, 2010

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/

Related questions

-webkit- vs -moz-transition

I am using CSS3 transitions on my site and the -webkit- seems to be working, whilst the -moz- is not. Here is the CSS: article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 0.2s ease-in-out; } .…

Read More
How to remove the border highlight on an input text element

When an HTML element is 'focused' (currently selected/tabbed into), many browsers (at least Safari and Chrome) will put a blue border around it. For the layout I am working on, this is distracting and does not look right. <…

Read More
Custom CSS Scrollbar for Firefox

I want to customize a scrollbar with CSS. I use this WebKit CSS code, which works well for Safari and Chrome: ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } How can …

Read More