Border Radius Covers Inner Divs

Question

I have a Coda slider on one web page (manual, without using a plugin, but that doesn't matter), and the outer div has a border radius.

A bunch of inner divs have background colors, but they stick out over the corners when I want them to be FOR THE CLOSED corner.

Is there any way to achieve this?

Answer 1

I found that WebKit truncates everything if I put overflow: hidden in the element, but Gecko will not (see my blog post for code and screenshots ). The best I could do in Gecko was to either put the radius of the border in the inner div or add a marker / pad to the div wrapper so that the inner divs sit below the corners.

Answer 2

If you apply the: static position to an overflow element: hidden, you will achieve the results you are looking for.

Check it out: overflow: hidden, border radius and position: absolute