title: Google Chrome showing black border on focus state for button user agent styles
body: <p>Recently i was working on a web design project, and noticed something odd, after the last Google Chrome update. The default border style(user agent style) for button is changed, and which is looking visually annoying to me. </p>
  
  <p><strong>Is there any method to modify/restore the default browser styles, i.e., user agent styles permanently?</strong></p>
  
  <p>here are some images of the problem:
  <a href="https://i.stack.imgur.com/vPChy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vPChy.png" alt="self developed web page button"></a></p>
  
  <p><a href="https://i.stack.imgur.com/lyi0v.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lyi0v.png" alt="state of border color on click/focus"></a></p>
  
  <p><strong>i have also checked other websites and even google</strong>
  <a href="https://i.stack.imgur.com/qAFuN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qAFuN.png" alt="browsing on google images"></a></p>
  
  <p><a href="https://i.stack.imgur.com/7gjua.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7gjua.png" alt="other example"></a></p>
  
  <p><strong>also checked the dev tool, found this border styles applied on the focus state of the button</strong>
  <a href="https://i.stack.imgur.com/zWkyk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zWkyk.png" alt="also checked the dev tool, found this border styles applied on the focus state of the button"></a></p>