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 `button` and `button1` defined in my css like so:

```css
.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;
}

```

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?

Here is an image of what my buttons look like:

![enter image description here](https://i.stack.imgur.com/Z17Zk.jpg)

In this case, I am trying to focus the `Jail Address` button.

The html for the input buttons is like so:

```
<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'"> 
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">

```