HTML Form How to - Create form with round Corner

Question

We would like to know how to create form with round Corner.
Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#login {<!--from  ww  w  . j ava  2  s  . co m-->
  border: 1px solid red;
  cursor: pointer;
  height: 47px;
  position: absolute;
  right: -59px;
  text-align: right;
  top: 18px;
  width: 53px;
}

.arrow {
  height: 15px;
  margin: 64px 0 0 42px;
  position: absolute;
  right: 0;
  width: 21px;
  z-index: 100;
}

.triangle-border {
  position: relative;
  padding: 8px;
  margin: 1em 0 3em;
  border: 2px solid #44C544;
  color: #333;
  background: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}


#login-content {
  width: 290px;
  color: #848484;
  z-index: 9;
  padding: 13px;
}

#login-content a {
  width: 100%;
  display: block;
}

#login-content lable {
  padding-right: 10px;
  width: 30%;
  display: inline-block;
}

#login-content div {
  margin-top: 10px;
}


#login-content a.forgot {
  float: right;
  font-size: 12px;
  cursor: pointer;
  margin-top: 5px;
  color: #848484;
}

</style>
</head>
<body>
  <div id="loginmain">
    <div id="login-content" class="triangle-border top" style="">
      <form onsubmit="return false;" >
        <div>
          <lable>Username</lable>
          <input name="username" id="username" type="text">
        </div>
        <div>
          <lable>Password</lable>
          <input name="password" id="password" type="password">
        </div>
        <a class="sign-up left clear">Sign Up</a> <a class="forgot">Forgot
          Password?</a> <input name="login" type="submit" value="Sign In">
      </form>
    </div>
  </div>
</body>
</html>
The code above is rendered as follows: