CODEWITHSUNDEEP
css
Brandon Wang
Brandon Wang

Reputation: 3931

Have border-radius cover inner divs

I have a Coda slider on one webpage (hand-crafted, not using the plugin, but that's irrelevant) and the outer div has a border-radius.

A bunch of inner divs have background colors, but they stick out on top of the corners when I want them to be BEHIND the rounded corner.

Is there any way to achieve this?

Upvotes: 22

Views: 24167

Answers (2)

blu42media
blu42media

Reputation: 246

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

Check this out: overflow:hidden, border-radius and position:absolute

Upvotes: 20

robertc
robertc

Reputation: 75707

I found that WebKit would crop everything if I put overflow: hidden on the element, but Gecko wouldn't (see my blog post for code and screenshots). The best I could do in Gecko was either put a border radius in the inner div too, or add a margin/padding to the wrapper div so that the inner divs sat below the corners.

Upvotes: 18

Related Questions