Nice inputs css3 rounded

by rastrano

HTML

<div class="contactform">
<form action="http://languagegame.nl/contacts/" method="post" class="box">
<ul class="zebra">
<li>
<div class="contactleft">
                  <label for="mlcf_name">Naam* </label>
                </div>
<div class="contactright">
<input type="text" name="mlcf_name" id="mlcf_name" size="30" maxlength="50" value="" /></div>
</li>
<li>
<div class="contactleft">
                  <label for="mlcf_email"> Uw e-mail* </label>
                </div>
<div class="contactright">
<input type="text" name="mlcf_email" id="mlcf_email" size="30" maxlength="50" value="" /></div>
</li>
<li>
<div class="contactleft">
                  <label for="mlcf_subject">Onderwerp</label>
                </div>
<div class="contactright">
<input type="text" name="mlcf_subject" id="mlcf_subject" size="30" maxlength="50" value="" /></div>
</li>
<li>
<div class="contactleft">
                  <label for="mlcf_message">Bericht</label>
                </div>
<div class="contactright"><textarea name="mlcf_message" id="mlcf_message" cols="35" rows="8" ></textarea></div>
</li>
<li>
<div class="contactleft">
                  <label for="mlcf_www">Uw website</label>
                </div>
<div class="contactright">
<input type="text" name="mlcf_www" id="mlcf_www" size="30" maxlength="50" value="" /></div>
</li>
<li>
<div class="contacrequired"> Vul de verplichte velden in
              </div>
<div class="contactright">
<input class="contactsubmit" type="submit" name="Submit" value="Sturen" id="contactsubmit" />
<input type="hidden" name="mlcf_stage" value="process" />
              </div>
</li>
    </ul></form>
</div>

CSS

input:focus{
 border: 2px inset green!important;
 color: green!important;
 font-size:136%!important; 
font-weight:bolder !important;
}
textarea:focus {
  border: 2px inset green!important;
 color: green!important;
 font-size:136%!important; 
font-weight:bolder !important;
}
input#contactsubmit{
transition: all 0.7s;
-moz-transition: all  0.7s; /* Firefox 4 */
-webkit-transition: all  0.7s; /* Safari and Chrome */
-o-transition: all   0.7s; /* Opera */
-ms-transition: all  0.7s; /* IE >9 */
 margin-top:12px;
 border: 2px outset !important;
  font-size:136%!important; 
}
input#contactsubmit:hover{
 margin-top:12px;
 border: 2px inset!important;
 font-size:136%!important; 
 color: green!important;
 font-weight:bolder !important;
}
input#contactsubmit:focus{
 margin-top:12px;
 border: 2px inset!important;
 font-size:136%!important; 
 color: green!important;
 font-weight:bolder !important;
}
input{ 
transition: all 0.7s;
-moz-transition: all  0.7s; /* Firefox 4 */
-webkit-transition: all  0.7s; /* Safari and Chrome */
-o-transition: all   0.7s; /* Opera */
-ms-transition: all  0.7s; /* IE >9 */
border: 2px inset;
font-family: "ExoLight"; font-size: 120%; 
-o-border-radius-topleft: 6px;
-o-border-radius-topright: 16px;
-o-border-radius-bottomright: 3px;
-o-border-radius-bottomleft: 6px;
-o-border-radius-topleft: 6px;
-ms-border-radius-topright: 16px;
-ms-border-radius-bottomright: 3px;
-ms-border-radius-bottomleft: 6px;
-webkit-border-top-left-radius: 6px;
-webkit-border-top-right-radius: 16px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-topright: 16px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-top-right-radius: 16px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 6px;
}
textarea {
transition: all 0.7s;
-moz-transition: all  0.7s; /* Firefox 4 */
-webkit-transition: all  0.7s; /* Safari and Chrome...