title: Input & Textarea Border not showing on Safari
body: <p>The border of my form is showing up great on all browsers except for Safari. Some times they don't show up at all and sometimes one edge is missing. Any help would be awesome. You can go here to look at it <a href="http://cmweb.design" rel="nofollow">http://cmweb.design</a></p>
  
  <p>Here's the html</p>
  
  <pre><code>    &lt;section id="contact"&gt;
  
      &lt;article&gt;
  
        &lt;h2 class="title1"&gt;Start Your Project&lt;/h2&gt;
        &lt;p&gt;Reach out to see if we are the right fit for your project. We'd love to help see a vision come to reality.&lt;/p&gt;
  
        &lt;form method="POST" action="mail.php"&gt;
          &lt;aside id="inputs"&gt;
            &lt;input type="text" name="firstname" value="First Name" required&gt;&lt;br&gt;
            &lt;input type="text" name="lastname" value="Last Name" required&gt;&lt;br&gt;
            &lt;input type="email" name="email" value="Email" required&gt;&lt;br&gt;
          &lt;/aside&gt;
          &lt;textarea name="comments"&gt;Enter message here...&lt;/textarea&gt;
          &lt;button type="submit" value="Send"&gt;Submit&lt;/button&gt;
        &lt;/form&gt;
  
      &lt;/article&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Here's the css:</p>
  
  <pre><code>*--- Contact ---*/
  
  #contact{
    background-color: #181818;
    display: table;
    text-align: center;
    width: 100%;
  }
  
  #contact article{
    display: table-cell;
    padding: 100px;
    vertical-align: middle;
  }
  
  #contact h2{
    color: white;
    padding-bottom: 20px;
  }
  
  #contact p{
    font-size: 14px;
    margin: 0 auto;
    padding-bottom: 40px;
    width: 50%;
  }
  
  form{
    font-family: 'Raleway', sans-serif;
    -webkit-appearance: none;
  }
  
  #inputs{
    display: inline-block;
  }
  
  input{
    background-color: #181818;
    border-color: #cfcfcf;
    border-width: 0px 0px .5px 0px;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-style: solid;
    color: #cfcfcf;;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    height: 25px;
    margin-right: 20px;
    margin-top: 21px;
    text-transform: uppercase;
    -webkit-appearance: none;
    width: 240px;
  }
  
  textarea{
    background-color: #181818;
    border-color: #cfcfcf;
    border-width: .5px;
    border-style: solid;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    color: #cfcfcf;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    height: 120px;
    line-height: 25px;
    min-width: 305px;
    margin-top: 20px;
    padding: 5px 10px;
    text-transform: uppercase;
    width: 10%;
    -webkit-appearance: none;
    vertical-align: top;
  }
  
  button{
    background: none;
    border: .5px solid #cfcfcf;
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    color: white;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 15px;
    margin-left: 20px;
    margin-top: 20px;
    padding: 50px 40px;
    position: relative;
    text-transform: uppercase;
    vertical-align: top;
  }
  
  button::after{
    border-top: 70px solid rgba(101,70,84,0.5);
    content: "";
    top: 25px; right: 0;left: 0;
    position: absolute;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
  }
  
  button:hover::after{
    border-top: 70px solid rgba(227,228,217,0.5);
    content: "";
    top: 25px; right: 0; left: 0;
    position: absolute;
  }
  </code></pre>