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

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.