Border-radius doesn’t affect inner elements

I have a layout where the all of the page content is in a box with rounded corners. This includes the title of the page, etc. I have a div
element that contains my header content, a div
that contains the main content of the page, and a div
that contains the footer. My problem is this: Since the border of my “header” div
is not rounded, the large “container” div
seems to not be rounded at the top. I have investigated, and shown that this is simply the “header” div
superimposing itself over the “container” div
. I have an example here: http://jsfiddle.net/V98h7/
.

I have tried rounding the border of the “header” div
to the same extent, but this creates a small defect on the border (it gains a border of its own, of the “header” div
‘s background color). Out of desperation, I also tried setting the z-index of the container to a large number. THat did not do anything.

I feel that there should be a simple solution to this problem. I do not want a javascript fix. I would prefer CSS, but LESS is ok too.

Problem courtesy of: diracdeltafunk

Solution

Here is the fiddle – http://jsfiddle.net/ashwyn/V98h7/2/

Add –

#outer {
   overflow:hidden
}

and it will work.

Solution courtesy of: Ashwin

Discussion

here is the update jsfiddle

http://jsfiddle.net/V98h7/1/

To just round border corners border-radius
can take 4 values TOP-LEFT RADIUS
TOP-RIGHT RADIUS
BOTTOM-RIGHT RADIUS
BOTTOM-LEFT-RADIUS

so border-radius: 20px 20px 0 0;
will round your inner div from top. Remember to use the same radius value as that of the parent div, else you will see some extra border.

Discussion courtesy of: Rishabh

Try giving the container div a slightly larger border radius (on the top two corners) than the header div.

Discussion courtesy of: John Stimac

Use this:

#outer { overflow: hidden; }

or this:

#inner1 {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

Or you maybe can try this:

#outer div:first {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

(Note: I haven’t tested the last option above).

Discussion courtesy of: Silvio Delgado

This recipe can be found in it’s original form on Stack Over Flow
.

稿源:CSS3 Recipes (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Border-radius doesn’t affect inner elements

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录