.body{
    align-items:center;
    }
#form{
        width:500px;
    }
p.double {border-style: double;}
<p class="double">A double border.</p>
<style>
label {display: block;}

input[type=text] {
  width: 100%;
  padding: 12px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 3px solid #ccc;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid #555;
}
</style>
</head>
<body>

<h2>Input fields with black border on :focus</h2>

<p>Here, the input field gets a black border color when it gets focus (clicked on). We have also added the CSS transition property to animate the border color (takes 0.5 seconds to change the color on focus):</p>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Doe">
</form>

p.outset {border-style: outset;}
<p class="outset">An outset border.</p>
}

<h1>Show Email Fields</h1>

<h3>Show an email field (allows only one email address):</h3>
<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
  <input type="submit">
</form>

<h3>Show an email field (allows multiple email addresses). Separate each email address with a comma:</h3>
<form action="/action_page.php">
  <label for="emails">Enter email addresses:</label>
  <input type="email" id="emails" name="emails" multiple>
  <input type="submit">
</form>
<h1>Display a Telephone Input Field</h1>

<form action="/action_page.php">
  <label for="phone">Enter a phone number:</label><br><br>
  <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
  <input type="submit">
</form>
<form><br>
  <input type="radio" id="small" name="shirt_size" value="SMALL">
  <label for="Small">Small</label><br>
  <input type="radio" id="medium" name="shirt_size" value="MEDIUM">
  <label for="Medium">Medium</label><br>
  <input type="radio" id="large" name="shirt_size" value="LARGE">
  <label for="large">Large</label><br>
  <input type="radio" id="X-Large" name="shirt_size" value="X-Large">
  <label for="X-Large">X-Large</label><br></br>
</p>
 </form> 
 </body>