I have the following button:
As I show you this is what you see when you click.
round the button with border-radius
my question is:
Can you also round those corners when clicking?
No, you can not, but as you recommend you should remove the outline, but simulate it with another box-shadow, something like this:
button{
background: white;
border-radius: 3em;
padding: .5em 2em;
border: cyan solid 1px;
}
button:focus{
outline: none;
box-shadow: 0 0 0 1px blue ;
}
<button> SOMETHING </button>