Удалить границу системы с элемента html

Question

< - Я имею в виду эту пунктирную границу (показан верхний левый угол).

Предполагается, что это кнопка со ссылкой. Это выглядит здорово, но когда я нажимаю на него, браузер рисует вокруг него границу. Если удалить <a> из кода и нажмите еще раз, граница не будет нарисована

CSS:

#button{ 
     padding: 0.5em; 
     margin: 0 auto; 
     border-radius: 3px; 
     background-color: #B3C833; 
     font-family: 'Consolas',monospace; 
     font-size: 3em; 
     display: inline-block; 
} 

HTML:

<a href="#"> 
    <div id="button"> 
     <span id="pref">http://</span><span id="addr">example.com</span> 
    </div> 
</a> 

Answer 1

Вы должны добавить porperty:

a { 
    outline:none; 
} 

Answer 2

Эта граница доступна для доступа и не должна удаляться. Это позволяет людям, которые отключены и получают доступ к вашему сайту с помощью клавиатуры, чтобы узнать, где находится фокус.

Заканчивать outlinenone.com

Если вы не возражаете потерять часть трафика, вы можете удалить его в любом случае с:

a { 
    outline:none; 
}