Google Chrome showing black border on focus state for button user agent styles

This is because the new chrome update
https://developers.google.com/web/updates/2020/05/nic83#forms

you can override black outline in most cases by

*,*:focus,*:hover{
    outline:none;
}

and you can see this article

https://web.dev/style-focus/#use-:focus-visible-to-selectively-show-a-focus-indicator

if you want to remove outline just for mouse user.