Geek Answers Handbook

Rounded corners in the parent div that do not affect the div div

So, I'm experimenting with rounded corners in CSS3 (not in IE, I don't care if it works there), and I have a DIV where all my content lives pretty well. The problem I am facing is that there are child DIVs that are not masked by parent rounded corners. I'm not looking for a child to inherit rounded corners. I just want the content inside the parent not to be visible, where it is rounded, as if it were masked. I tried using "overflow: hidden;", but that doesn't seem like a trick.

Does anyone have any idea how kids from rounded divs can be masked by parent divs? If it is used, I use "position: absolute"; on the parent div. Not sure if that will make a difference.

Thanks!

+8
html css css3 hierarchy rounded-corners
source share
2 answers

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

+5
source share

Use the prop on the div. If you make the registration equal to the radius, you do not have to worry about any overlap or content appearing in rounded areas.

 <style> .round{ border-radius:10px; padding:10px; background-color:red; } </style> <div class="round">Rounded Corners</div>

Here is a useful site that talks about CSS3's border view: http://www.css3.info/preview/rounded-border/ .

+3
source share

More articles:


All Articles