Border-Radius doesn't work in link button on Chrome
<p>I have styled an oval button and it in an a element with the class .button</p>

<p>It works and looks great on firefox, but I get a rectangular button in Chrome, without a border. The link still works but the border and border-radius seems to be misunderstood.</p>

<p>This is the CSS:</p>

<pre><code>a.orange-circle-button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
box-shadow: 0 6px 9px 0 rgba(0,0,0,0.4);
border: .5em solid #00667e;
font-size: 1.2em;
text-transform: none;
text-align: center;
font-family: "lato", sans-serif;
line-height: 3em;
color: #ffffff;
background-color: #283f72;
margin: auto;
display: block;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
height: 4em;
width: 12em;
position: relative; }
</code></pre>

<p>Here is the HTML:</p>

<pre><code>&lt;a href="https://www.frontiercomputercorp.com/product-category/in-stock/" class="orange-circle-button" target="_blank"&gt;Current Stock&lt;/a&gt;
</code></pre>

<p>This is it in the wild: <a href="https://www.frontiercomputercorp.com/" rel="noreferrer">https://www.frontiercomputercorp.com/</a></p>

<p>I am assuming I've done something wrong with the border-radius that's unique to chrome, but I'm not skilled enough to know if it's being caused by the way I'm calling the class. </p>

<p>To recap: In firefox the button is oval (as I wanted)
          In Chrome it is rectangular</p>

<p>HeLP!</p>