Form Registration Form rounded corners
<BODY>
<div class= "Form" >
<ul class= "List" >
<li>
<label> User name:</label>
<div class= "Circle-box user" >
<input type= "Text" placeholder= "5 6-letter or number combination"/>
</div>
</li>
<li>
<label> User name:</label>
<div class= "Circle-box user" >
<input type= "text" value= "a small string to victory" onfocus= "this.value=" "
Onblur= "if (this.value==") {this.value= ' a small string to victory '} ' class= ' value '/>
</div>
</li>
</ul>
</div>
</BODY>
============================
. form {
width:600px;
height:600px;
margin:100px Auto;
Background: #FBFBFB;
border:1px Transparent dashed;
}
. list {
width:550px;
margin:20px Auto;
}
. list Li {
width:550px;
height:40px;
margin-top:15px;
}
. List Label {
width:110px;
height:40px;
Display:inline-block;
font-size:16px;
line-height:40px;
Text-align:right;
Float:left;
margin-right:20px;
}
. list. circle-box {
width:320px;
height:40px;
border:1px #D9D9D9 Solid;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
Float:left;
}
. list. User {
Background:url (.. /images/img50.png) No-repeat left center;
}
. List input{
width:266px;
height:36px;
line-height:36px\9;
margin-left:47px;
margin-top:1px;
Border:none;
font-size:16px;
padding-left:6px;
}
. List. value{
Color: #A9A9A9;
}
============================
Form Registration Form Fillet Demo