title: How do I get my content2 border to come inside of the content1 border radius and how I do put a vertical line between content2 elements?
body: <p>I am wondering if any one could direct me to some online resources where I can find out how to put a vertical line inside of my content2 border which will then split the element names from the element values? Also, how do I get my content2 border from outside of border-radius content? I want it to come inside of the content border-radius. Right now it looks tacky being outside of the border-radius content. Any suggestions would be much appreciated. HTML code and CSS code. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.intro h1 {
    font-family: 'Cambria';
    font-size: 16pt;
    font: bold;
    text-align: left;
  }
  
  .intro p {
    font-family: 'Calibri';
    font: italic;
    font-size: 12pt;
    padding: 0px 690px 0px 20px;
    text-align: left;
  }
  
  .content {
    border: 2px solid;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
  }
  
  #para1 {
    padding: 0px 1050px 0px 20px;
    position: relative; 
  }
  
  #para2 {
    padding: 0px 1099px 0px 20px;
    position: relative; 
  }
  
  .username-label,
  .password-label {
   margin: 10px 0px 0px 350px;
   position: relative; 
   top: -70px; 
  }
  
  .existingUsername, 
  .existingPassword, 
  #username_error1, 
  #password_error2
  {
      top: -70px; 
       position: relative;       
  }
  
  #button1{ 
       background-color: #add8e6;
       margin-left: 425px; 
       position: relative; 
       top: -70px; 
      -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius:10px;
    padding: 0px 20px 0px 20px; 
  }
  
  #button2{
    background-color: #add8e6;
    margin-left: -500px; 
    position: relative; 
    top: -10px; 
   -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding: 0px 20px 0px 20px; 
  
  }
  
  
  .Username-label1, 
  .Password-label2,           
  .Email-label3, 
  .Repeat-Email-label4 
  {
    margin: 0px 0px 0px 330px;
    position: relative; 
    top: -70px; 
  }
  .newUsername, 
  .newPassword, 
  .newEmail, 
  .repeatEmail{
    position: relative;
     top: -70px;
    margin-left: 40px; 
  
  } 
  
  span{
  
   color: red; 
   margin-left: 300px;
   position: relative; 
   top: -70px; 
  }
  
  .content2{ 
  
    display: none;
    border-style: solid; 
    border-width: 1px; 
    top: -320px; 
    position: relative; 
    margin-left: 20px; 
  
  } 
  
  .accountName{ 
  
  border: none; 
  
  }
  
  .ElementOne{ 
  
  font-weight: bold; 
  
  }
  
  #Content2-Button1, 
  #Content2-Button2{ 
  
   background-color: #add8e6;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
   padding: 0px 20px 0px 20px; 
  
  } 
  
  .accountName, 
  .accountEmail,
  .accountGpa{ 
  
   margin-left: 200px; 
  
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
  
    &lt;link href="Home.css" rel="stylesheet" /&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;title&gt;Project&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
  &lt;div class="container"&gt;
    &lt;div class="intro"&gt;
  
      &lt;h1&gt;Welcome to Cuyahoga Community College Student Services Online&lt;/h1&gt;
  
      &lt;p&gt;Cuyahoga Community College recognizes students' rights to access personal and academic records in accordance with the Family Educational Rights and Privacy Act of 1974 (FERPA) as amended by Public Law 93-568.&lt;/p&gt;
    &lt;/div&gt;
    &lt;br/&gt;
  
    &lt;div class="content"&gt;
      &lt;div class="row top"&gt;
        &lt;p id="para1"&gt;Already have an account with us? Returning users may log in by entering their site username and password. &lt;/p&gt;
        &lt;div class="login"&gt;
          &lt;label class="username-label" for="existingUsername"&gt;Username&lt;/label&gt; 
           &lt;input class="existingUsername" type="text" /&gt;&lt;br&gt;&lt;span id="username_error1"&gt;&lt;/span&gt;&lt;br&gt;
  
  
          &lt;label class="password-label" for="existingPassword"&gt;Password&lt;/label&gt;
          &lt;input class="existingPassword" type="password"/&gt;&lt;br&gt;&lt;span id="password_error2"&gt;&lt;/span&gt;&lt;br&gt;
          &lt;button id="button1"&gt;Log in&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;hr/&gt;
      &lt;div class="row bottom"&gt;
        &lt;p id="para2"&gt;New users, please create a new account by providing us with some basic information.&lt;/p&gt;
  
        &lt;div class= "new_customers_info"&gt;
  
          &lt;label class="Username-label1" for="newUsername"&gt;Username&lt;/label&gt;
          &lt;input class="newUsername" type="text"/&gt;
          &lt;br&gt;&lt;span id="New_Username_error"&gt;&lt;/span&gt;&lt;br&gt;
  
          &lt;label class="Password-label2" for="newPassword"&gt;Password&lt;/label&gt;
          &lt;input class="newPassword" type="password"/&gt;
          &lt;br&gt;&lt;span id="New_Password_error"&gt;&lt;/span&gt;&lt;br&gt;
  
          &lt;label class="Email-label3" for="newEmail"&gt;Email Address&lt;/label&gt;
           &lt;input class="newEmail" type="email"/&gt;
           &lt;br&gt;&lt;span id="New_Email_error"&gt;&lt;/span&gt;&lt;br&gt;
  
          &lt;label class="Repeat-Email-label4" for="repeatEmail"&gt;Repeat Email Address&lt;/label&gt;
           &lt;input class="repeatEmail" type="email"/&gt;
           &lt;span id="Repeat_Email_error"&gt;&lt;/span&gt;
  
          &lt;button id="button2"&gt;Create Account&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;div class="content2"&gt;
     &lt;label class="ElementOne"  for="accountName"&gt;AccountName&lt;/label&gt;
      &lt;input class="accountName" type= "text"&gt;&lt;br&gt;&lt;br&gt;
     &lt;label class="ElementTwo"  for="accountEmail"&gt;EmailAddress&lt;/label&gt;
     &lt;input class="accountEmail" type= "email"/&gt;&amp;nbsp;&amp;nbsp; &lt;button id="Content2-Button1"&gt;Update&lt;/button&gt;&lt;br&gt;&lt;br&gt;
     &lt;label class="ElementThird" for="accountGpa"&gt;CurrentGPA&lt;/label&gt;
      &lt;input class="accountGpa" type= "number"/&gt;&amp;nbsp;&amp;nbsp; &lt;button id="Content2-Button2"&gt;Update&lt;/button&gt;
    &lt;/div&gt;
  
     &lt;br/&gt; 
  &lt;/div&gt;
   &lt;footer&gt;Cuyahoga Community College&lt;/footer&gt;
   &lt;footer&gt;700 Carnegie Avenue, Cleveland, Ohio, 44115&lt;/footer&gt;
      &lt;script src="Home.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>