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

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:

    

        
Box Title
        
1
    

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

    

        
Box Title
        
1