Menu
So, I'm experimenting with using rounded-corners in CSS3 (not in IE, don't care if it works there), and I have the DIV where all of my content lives looking quite nice. The problem I'm having is that there are child DIVs that are not getting "masked" by the parent's rounded corners. I'm not looking for the child to inherit the rounded-corners. I just want to have any content inside the parent to not be visible where it is rounded, as if it were masked. I tried using "overflow: hidden;", but that doesn't seem to do the trick.
Does anyone have any ideas how the children of the rounded-cornered container DIV can be sorta masked by the parent DIV? If it's of any use, I'm using "position: absolute;" on the parent DIV. Not sure if that will make any difference.
Thanks!
599
CSS Demo: border-radius Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.
If you want the child divs to fit the parent size, you should put a margin at least of the size of the child borders on the child divs ( child. margin >= child.
If there are contents within the div that has the curved corners, you have to set overflow: hidden because otherwise the child div's overflow can give the impression that the border-radius isn't working. This answer worked for me.
Try adding overflow: hidden; to the parent element. This fixed the problem for me.
113
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
