Is it possible to have a rounded / curved side rather than corners?

Question

Trying to create something similar to the image below.

The container will be 100% wide, the header will be a fixed height, but the body height will be dynamic.

I was able to almost get what I want by doing the following in a 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 the "Header" div to be bent and the body below it, but I don't think it is possible (the title will contain a filled image).

EDIT : forgot to mention. With the above code and margin-top:-15px added to the bottom div, it worked in Firefox and IE, but not in Chrome and Safari. Maps and sliders still went into the header div and weren't cropped.

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

^ That's how I got it now. As you can see, the map is not cropped on the curve and goes directly to the header.

Answer 1

You headed in the right direction

Place the curve in the body or .main with overflow: hidden , and negative margin-top is a good way. To solve the problem with third-party content position: absolute , you just need to make sure your .main has position: relative .

Here is a fiddle with positioned and non-positioned content inside .main (note: I changed the curve to be a little more visible for demonstration).

It works great in IE9 +, Chrome, and FF. Obviously, any third-party content that is placed in the headline or in another place outside of .main will not necessarily be hidden, but this is to be expected. But even this can be worked out with proper positioning ( relative ) and z-indexing ( main higher than header ), as this fiddle shows.

Answer 2

Try using margin:-20px or another dimension.