Проблемы с CSS на кнопке и непонятный border?

Question

[Mesuti]

Привет!
Подключаю эту кнопку - jsiddle
Делаю border-radius 2 rem
Вот такая красота:


Эта кнопка верно отображается только на jsfiddle и если она одна на странице без лишнего кода.
Если подключаю на свой сайт, начинаются проблемы- заполнение цветом квадратное и при нажатии появляется непонятный border, который пропадает только при нажатии в другом месте:


Стоит отметить, что подобный border появляется и на других моих подключенных компонентах и на других сайтах и на любом браузере.
Вот еще пример кнопки:

Вот пример на слайдере:


Вопросы:
1) Что это за бордер при клике? Может быть я не делаю какой-то сброс? Использую Bootstrap 3 и 4, но были проблемы и на CMS HostS. Подключаю все как обычно, раньше не было такого.
2) Возможно первый вопрос решает и кнопку, но тоже спрошу как ее тоже можно спасти от border и сделать заполнение не квадратное?

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

Answer 1

[Алексей Уколов]

Что это за бордер при клике?

https://webref.ru/css/outline

как сделать заполнение не квадратное?

Не видя код ответить невозможно.

свои сайты не могу выложить по причине того, что уже отсидел в бане за это целых два месяца

Посмотрел ваши вопросы и ответы - не вижу ничего криминального, кроме выкладывания ссылки на сайт через сокращатель зачем-то. В любом случае, вы совершенно спокойно можете подключить на jsfiddle все ваши css, создать минимальную разметку и проблема станет воспроизводиться и там.

Comments

[Mesuti]

Спасибо за outline, он уже был, но проблема ушла после добавления !important
А квадратная заливка так и осталась (в самом низу страницы синяя кнопка)
http://пермь-стандарт.рф/form2/#contact

Удаляю контент и меню со страницы - все становится нормально, подскажите, какие стили могут конфликтовать?
Заполнение построено на active , не могу сообразить, как его заменить

[Mesuti]

Не знаете?

Answer 2

[Anton Filippov]

Это не бордер, а outline

*, *:focus {
outline: none
}

решит вашу проблему (только этот стиль должен быть прописан после бутстрапа)

Но вообще, он удобен для того, чтобы осуществлять навигацию по сайту с помощью клавиатуры(tab, стрелки) и для accessibility