runde Ecken nur unten

Diese Suchbox hängt oben rechts in einem Layout

by Jens Grochtdreis

HTML

<div id="headsearch">
                <form method="post" action="" class="columnar yform">
                    <div class="type-text">
                        <label for="sitesearch">Suche</label>
                        <input name="sitesearch" id="sitesearch" value="" />
                        <input type="submit" class="submit" name="" value="Finden" />
                    </div>
                </form>
              </div>

CSS

* { font-family: Arial, Helvetica, sans-serif;}

/* Suchformular im Kopf */
    #headsearch {position: absolute;right: 0; top: 0;
                width: 335px;height: 44px;
                /* Hintergrundfarbe als Fallback für den Verlauf */
                background: #0072bc;      
                background: -webkit-gradient(linear, left top, left bottom, from(#00aeef), 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);
                border: 1px solid #00aeef; 
                padding: 5px 7px 10px 7px; 
                /*  ----------- 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; 
            
        /* Korrektur für den IE9 */
        box-shadow: inset 0 44px 44px -22px #00aeef;
}
        
    #headsearch .yform {
        background-color: #e7f8ff; 
        border: 1px solid #00aeef;  
        margin-bottom: 0;
        padding: 8px;
        /* ------ runde Ecken ----------------- */
            -moz-border-radius: 0 0 35px 35px / 0 0 23px 23px; 
         -webkit-border-radius: 0 0 35px 35px / 0 0 23px 23px; 
                 border-radius: 0 0 35px 35px / 0 0 23px 23px; 
         }

    #headsearch label { position: relative; top: 5px; width: 30px; color: #0072bc;  }
    #headsearch .type-text {margin: 0; padding: 0;}
    #headsearch .submit { position: relative; top: -2px;color: #0072bc; margin-right: 0; border: none; background: #fff;height: 30px;padding-left: 30px;width: auto;}    
    #headsearch .submit:hover, #headsearch .submit:focus { background-position: -758px -120px;text-decoration: underline;cursor:...