Possible to have a rounded/curved side, not corners?

Question

Trying to build something similar to the image below.

The container would be 100% width, the header would be fixed height, but the body height would be dynamic.

I was able to almost get what I want by doing the following to the "Body" div

border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-moz-border-radius: 50% 50% 0 0 / 15px 15px 0 0;
-webkit-border-radius: 50% 50% 0 0 / 15px 15px 0 0;

Theoretically, I would like to have the "Header" div be curved, and the body go underneath, but I dont think that's possible (the header will contain a filled image)

EDIT : forgot to mention. With the above code, and margin-top:-15px added to the bottom div, it did work in Firefox and IE, but not in Chrome and Safari. Maps and sliders still went over to the Header div and did not get cut off.

EDIT 2 http://jsfiddle.net/ShKNu/4/

^ This is how I currently have it. As you can see, the map does not get cut off on the curve, and goes right into the header.

Answer 1

You were headed in the right direction

Putting the curve on the "body" or .main section with overflow: hidden and a negative margin-top is a good way to go. To resolve your issue with 3rd party content that is position: absolute , you just need to make sure your .main has position: relative .

Here is a fiddle with both positioned and non-positioned content inside .main (note: I tweaked the curve to be a bit more prominent for the demonstration).

It tests fine in IE9+, Chrome, and FF. Obviously, any 3rd party content that is being placed in the header or elsewhere outside of .main will not necessarily be hidden, but that should be expected. Yet even that can be worked around with proper positioning ( relative ) and z-indexing ( main higher than header ) set, as this fiddle shows.

Answer 2

尝试使用margin:-20px或其他度量。