父DIV中的圆角不影响儿童DIV

Question

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!

Answer 1

Try adding overflow: hidden; to the parent element. This fixed the problem for me.

Answer 2

Use padding on the div. If you make the padding equal to the radius you shouldn't have to worry about any overlap or the content appearing in the rounded areas.

<style>
.round{
border-radius:10px;
padding:10px;
background-color:red;
}
</style>

<div class="round">Rounded Corners</div>

Here is a helpful site that talks all about the CSS3 Border Radius: http://www.css3.info/preview/rounded-border/ .