Border-radius doesn't affect inner elements

Question

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.

score 87 · Accepted Answer · edited Nov 26 '19 at 08:21

87

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

Add -

#outer {
   overflow: hidden;
}

and it will work.

More information on the overflow property can be found on MDN.

edited Nov 26 '19 at 08:21

Sebastian Zartner

18,808
10
90
132

answered Jun 13 '12 at 05:25

Ashwin

12,081
22
83
117

score 4 · Answer 2 · answered Jun 13 '12 at 05:28

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).

score 0 · Answer 3 · answered Jun 13 '12 at 05:24

0

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.

answered Jun 13 '12 at 05:24

Rishabh

1,185
1
12
28

As i said in my post, this causes glitches in some browsers. – diracdeltafunk Jun 13 '12 at 05:26
Can u tell which browsers, would help me testing as well. Am using the same code numerous places in my projects. – Rishabh Jun 13 '12 at 05:29
In Chrome i see this error a lot. It is very slight, but present. – diracdeltafunk Jun 13 '12 at 05:36

Goodmedalist · Answer 4 · 2018-03-12T19:11:47.227

Border fix for css border-radius background color bleed and inner elements breaking border radius. This might help with the weird border glitches.

/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; 
-webkit-background-clip: padding-box;
background-clip: padding-box;

This reference was found here http://css3please.com/ by https://stackoverflow.com/a/7052769/9071880

score -2 · Answer 5 · answered Jun 13 '12 at 05:25

-2

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

answered Jun 13 '12 at 05:25

John Stimac

5,335
8
40
60

Border-radius doesn't affect inner elements

5 Answers5

Linked

Related