title: CSS: Text input has another border when selected
body: <p>I have an input section for text and I would like the <code>border-radius</code> of that input to be <code>50px</code>.</p>
  <p>However, when I have the <code>border-radius</code>, the original border is still visible when that field is selected.</p>
  <p>I have added a picture below where you can clearly see what I'm referring to. The light border with radius is what I want, but I am also getting another rectangular border.</p>
  <p>Here's the CSS I currently have:</p>
  <pre><code>            .searchbox {
              
              width: 560px;
              height: 39px;
              border-color: #dedede;
              
              border-style: solid;
              border-radius: 50px;
  
  
  
          }
  </code></pre>
  <p>HTML for this is basic input:</p>
  <pre><code>&lt;input type=&quot;text&quot; name=&quot;q&quot; class=&quot;searchbox&quot;&gt;
  </code></pre>
  <p><img src="https://i.stack.imgur.com/uIIB3.png" alt="Image attached" /></p>