title: HTML Button Border
body: <p>I am trying to differentiate a button so that clients can see that it is the button that is in focus by default when the page loads. The design calls for a simple border around the button. I have <code>button</code> and <code>button1</code> defined in my css like so:</p>
  
  <pre class="lang-css prettyprint-override"><code>.button {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #003366
  }
  
  .button1 {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    color: #003366
    border: #00ffff;
    border-style: solid;
    border-width: 2px;
  }
  </code></pre>
  
  <p>The button that I am trying to focus loses the default formatting. How might I fix this so that it simply keeps its formatting, the only difference being a thicker border around the button? Also, is there a way to make the border simply wrap itself around the shape of the button instead of being a rectangular border?</p>
  
  <p>Here is an image of what my buttons look like:</p>
  
  <p><img src="https://i.stack.imgur.com/Z17Zk.jpg" alt="enter image description here"></p>
  
  <p>In this case, I am trying to focus the <code>Jail Address</code> button.</p>
  
  <p>The html for the input buttons is like so:</p>
  
  <pre><code>&lt;input type="reset" class="button" name="refresh" value="Refresh"&gt;
  &lt;input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'"&gt;
  &lt;input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'"&gt; 
  &lt;input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'"&gt;
  </code></pre>