0

If you click on the button, you will see a blue border, which is really annoying for me. Do you have any solutions on how to make it disappear/not appear at all?

button{
    color: aqua;
    background-color: transparent;
    border-radius: 20px;
}
<button>about</button>
CalvT
  • 3,123
  • 6
  • 37
  • 54
Christian
  • 5
  • 1
  • 2

1 Answers1

3

That's not a border but the outline of the button. You can remove it adding outline: none to it, but you should consider adding an alternative for those who use the keyboard to navigate.

button{
    color: aqua;
    background-color: transparent;
    border-radius: 20px;
    outline: none;
}
<button>about</button>
agustin
  • 2,187
  • 2
  • 22
  • 40
  • 1
    If you care also for Firefox, check https://stackoverflow.com/questions/71074/how-to-remove-firefoxs-dotted-outline-on-buttons-as-well-as-links – Martin Ždila Mar 21 '19 at 18:18
  • I think adding the prefix is no longer necessary: https://developer.mozilla.org/en-US/docs/Web/CSS/outline – IvanS95 Mar 21 '19 at 18:28