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:

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


Here is the fiddle –

Add –

#outer {

and it will work.

Solution courtesy of: Ashwin


here is the update jsfiddle

To just round border corners border-radius
can take 4 values TOP-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责编内容来自: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

使用声明 | 英豪名录