38

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.

0

5 Answers 5

88

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.

4

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

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.

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

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

-2

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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.