Remove border that appears in Chrome and Firefox browser

Navigation
1

How to remove border that appears in Chrome and Firefox browser. Already in the browser Edge does not appear. 

.fa-admin {
  font-size: 23px !important;
  line-height: .75em;
  vertical-align: -15%;
  position: absolute;
}

.avisosAdminNum,
.mensagensAdminNum {
  font-size: 12px;
  //font-weight: bold;
  position: relative;
  background-color: #d11010;
  color: white;
  border-radius: 30%;
  bottom: 7px;
  left: 21px;
}
<script src="https://use.fontawesome.com/785bf17c00.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0" class="btn popover-dismiss avisosAdmin" data-placement="bottom" data-toggle="popover" data-html="true" data-trigger="focus" title="Avisos">
      <i class="fa fa-bell fa-admin btn-preto "></i>
      <div class="avisosAdminNum ">99</div>
</a>

<a tabindex="0 " class="btn popover-dismiss mensagensAdmin "data-placement="bottom " data-toggle="popover " data-html="true " data-trigger="focus " title="Mensagens">
      <i class="fa fa-commenting fa-admin btn-preto"></i>
      <div class="mensagensAdminNum">99</div>
</a>
    
asked by anonymous 25.07.2017 / 16:56

1 answer

1

The class .btn when it has the :focus together ends up adding a box-shadow generating the appearance of a border, you need to add in your class .btn: focus box-shadow: none! important to give an overwrite in the bootstrap class. 

<style>
.fa-admin {
  font-size: 23px !important;
  line-height: .75em;
  vertical-align: -15%;
  position: absolute;
}

.avisosAdminNum,
.mensagensAdminNum {
  font-size: 12px;
  //font-weight: bold;
  position: relative;
  background-color: #d11010;
  color: white;
  border-radius: 30%;
  bottom: 7px;
  left: 21px;
}

.btn:focus {
  box-shadow: none !important;
}


</style>
<script src="https://use.fontawesome.com/785bf17c00.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0" class="btn popover-dismiss avisosAdmin" data-placement="bottom" data-toggle="popover" data-html="true" data-trigger="focus" title="Avisos">
      <i class="fa fa-bell fa-admin btn-preto "></i>
      <div class="avisosAdminNum ">99</div>
</a>

<a tabindex="0 " class="btn popover-dismiss mensagensAdmin "data-placement="bottom " data-toggle="popover " data-html="true " data-trigger="focus " title="Mensagens">
      <i class="fa fa-commenting fa-admin btn-preto"></i>
      <div class="mensagensAdminNum">99</div>
</a>
    
31.07.2017 / 14:21
Delphi7 source conversion problem for DelphiXE7 Validating file extensions with regex in c ++