CSS3 border-radius clipping issues

Question

I have a div with border-radius set to some value (let\'s say 10px), and a nested div that is the full width and height of its parent.

&l         


        

Answer 1

If you remove position: relative; on both elements the outer element clip the child around the rounded corners. Not sure why, and if it is a bug.

Answer 2

Just wanted to chime in on this one since I found this with a similar problem.

In a div with its overflow set to scroll, the border-radius didn't clip the content while scrolling unless the content was scrolled to the absolute top or bottom. Even then, the clipping only sometimes reappeared if I scrolled the document to the absolute top or bottom as well.

On a lark I added a transparent border to the element and that seemed to enforce the clipping on the corners. Since I already had some space around the element, I just cut that in half and applied the remainder to the border thickness. Not ideal, but I ended up with the result I wanted.

Tested in Chrome, Safari and Firefox on Mac.

Answer 3

I came here looking for an answer because I had a similar problem in Chrome 18.

I was trying to have a rounded box with two elements inside of it - title and index number - with index number positioned absolutely at the bottom left corner of the box.

What I noticed was if I had the HTML like this, the title element would bleed outside the rounded corners (border-radius) even though overflow was set to hidden on the parent element:

<a>
    <div style="overflow:hidden; border-radius:15px; position:relative;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>

But if I moved the relative positioning up one parent element everything looked good:

<a style="position:relative;">
    <div style="overflow:hidden; border-radius:15px;">
        <div id="title" style="text-align:center;">Box Title</div>
        <div id="index" style="position:absolute; top:80px;">1</div>
    </div>
</a>

Answer 4

It's not by design, there's an outstanding defect in Firefox about this. Should work OK in any WebKit browser. In Firefox you either have to add border radius to the contained element too, or use some sort of hack.