我正在创建一个注册页面，其中有3个输入字段.
After applying border-style:none
so the initial look is like this:-
After applying border-radius,
body {
margin: 0;
padding: 0;
text-align: center;
}
.title {
margin-top: 5%;
}
form {
margin-top: 10%;
}
.field {
display: block;
margin: 0 auto;
height: 38px;
width: 20%;
border-radius: 10px;
}
.email {
border-radius: initial;
}
.top {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.password {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.bottom {
margin-top: 10px;
border: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h2 class="title">Daily Newsletters Mail Service</h2>
<form action="" method="post">
<h2>Sign-In</h2>
<input class="field top" type="text" name="username" autofocus="true">
<input class="field email" type="email" name="email" placeholder="xyz@email.com">
<input class="field password" type="password" name="password" placeholder="Yx73@ysd">
<input class="field bottom" type="submit" name="signup" value="Sign-Up">
</form>
</body>
</html>