title: How to outline only the border-radius when input is selected?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sear {
    height: 50px;
    width: 400px;
    border: 0.5px solid black;
    border-radius: 15px 0px 0px 15px;
  }
  
  .sear:focus {
    //how to make only the border radius and other part of box selected?
  }
  
  .bar {
    display: inline;
    height: 50px;
    width: 60px;
    border: 0.5px solid black;
    background-color: #ECECEC;
    border-radius: 0px 15px 15px 0px;
  }
  
  .bar:hover {
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search..."&gt;
  &lt;button class="bar"&gt;&amp;#128270;&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I was just wondering if it is possible to select only the border-radius and the rest of the box when the mouse is focused on the input as opposed to the corner of the box.</p>