CODEWITHSUNDEEP
htmlcssborder-radius
diracdeltafunk
diracdeltafunk

Reputation: 1194

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.

Upvotes: 40

Views: 23553

Answers (5)

Ashwin
Ashwin

Reputation: 12431

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.

Upvotes: 90

Goodmedalist
Goodmedalist

Reputation: 387

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

Upvotes: 0

Silvio Delgado
Silvio Delgado

Reputation: 6965

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

Upvotes: 4

John Stimac
John Stimac

Reputation: 5491

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

Upvotes: -2

Rishabh
Rishabh

Reputation: 1205

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.

Upvotes: 0

Related Questions