Cool Dotted Border Style Sign UP HTML5 form

DEMO

The dotted border style form is designed in HTML5 & CSS3.this form can be use in any way.whether use in signup,login or personal details .you just have to change tag name of form with your required tag name.

Code of form

<html>
<head>
<style>

body{
font-family:arial;
}
#strt tr td {
padding-bottom:10px;
padding-top:20px;
font-size:25px;
color:white;
}
#toc{
height:200%;
font-size:20px;
display:inline;
border-radius:10px;
}
#p1{
padding:30px;
}
#add{
width:100%;
height:100px;;
border-radius:10px;
border:none;
}
#h1p{position: relative;
width: 600px;
background-color:orange;
color: white;
text-align: center;
margin-left: -110px;
border-radius: 100px;
border: 5px dotted white;
-webkit-transition:margin-top 0.1s ease;
margin-top:0px
} #h1p:hover{margin-top:7px;}

#but{background-color: orange;
margin-left: 350px;
position: relative;
margin-top: -61px;
color: white;
font-size: 35px;
-webkit-transform: rotateZ(-45deg);
border: 3px dotted white;
}
</style>
</head>
<body>
<center>
<form action="form.html" style='background:#1B63A5;width:35%;height:auto;border: 10px dotted white;margin-top:100px;'>
<div id='p1'>
<table id='strt'><h1 id="h1p">
Personal Information</h1>
<tr>
<td>Name  :</td>
<td><input type='text' id='toc' placeholder='Enter Name.....'  /></td>
</tr>
<tr>
<td>Age  :</td>
<td><input type='number' id='toc' value='18' min='15' max='100' /></td>
</tr>
<tr>
<td>DOB  :</td>
<td><input type='date' id='toc' /></td>
</tr>
<tr>
<td>e-mail :</td>
<td><input type='email' id='toc' /></td>
</tr>
</table>
</div>
<div>
 <input type='submit' value='+ Submit' id='but' /></div>
</form>
</center>
</body>
</html>

log-in form

DEMO

Code of form

<html>
<head>
<style>

body{
font-family:arial;
}

#strt tr td {
padding-bottom:10px;
padding-top:20px;
font-size:25px;

color:white;
}

#toc{
height:200%;
font-size:20px;
display:inline;
border-radius:10px;

}



#p1{
padding:30px;

}

#add{
width:100%;
height:100px;;
border-radius:10px;
border:none;
}

#h1p{position: relative;
width: 600px;
background-color:orange;
color: white;
text-align: center;
margin-left: -110px;
border-radius: 100px;
border: 5px dotted white;
-webkit-transition:margin-top 0.1s ease;
margin-top:0px

} #h1p:hover{margin-top:7px;}


#but{
background-color: orange;
margin-left: 350px;
position: relative;
margin-top: -61px;
color: white;
font-size: 35px;
-webkit-transform: rotateZ(-45deg);
border: 3px dotted white;
}

</style>
</head>

<body>
<center>
<form action="form.html" style='background:#1B63A5;width:35%;height:auto;border: 10px dotted white;margin-top:100px;'>
<div id='p1'>
<table id='strt'><h1 id="h1p">
log - in</h1>
<tr>
<td>Username</td>
<td><input type='text' id='toc' /></td>
</tr>
<tr>
<td>Password :</td>
<td><input type='password' id='toc' /></td>
</tr>
</table>
</div>
<div>
 <input type='submit' value='+ Submit' id='but' /></div>
</form>
</center>
</body>
</html>

if you want to change anything in form.you must have to known html & css code and in that way you can modify tag name as you require.