Runde Ecken unten und Verlauf

Diese Box könnte am oberen Seitenrand ein Suchformular beherbergen.

HTML

<div class="rundung-verlauf"></div>

CSS

/* Runde Ecken und Verlauf */
.rundung-verlauf {
            /*  ----------- runde Ecken ----------------- */
            -moz-border-radius: 0 0 40px 40px / 0 0 30px 30px; 
         -webkit-border-radius: 0 0 40px 40px / 0 0 30px 30px; 
                 border-radius: 0 0 40px 40px / 0 0 30px 30px; 
            /* Verlauf */
                background: #0072bc; /* Fallback */
                background: -webkit-gradient(linear, left top, left bottom, from(gray), to(#0072bc));
                background: -moz-linear-gradient(top, #00aeef, #0072bc);
                background: -o-linear-gradient(top, #00aeef, #0072bc);
                background: -webkit-linear-gradient(top, #00aeef, #0072bc);
                background: -ms-linear-gradient(top, #00aeef, #0072bc);

            /* Korrektur für den IE9, der runde Ecken und Verläufe zusammen nicht kann! */    
            box-shadow: inset 0 44px 44px -22px gray;    
            
            width: 400px;height: 60px;        
    }