How to remove blue border around the div [duplicate]


Would like to check what are the approaches that I can use to remove the anonymous blue outline

<div class="profile">

  <a href="" data-toggle="modal" data-target="#myModal" style="border-width:none;">
    <img class="img-circle" src="{{asset('images/user-profile1.jpg')}}" alt="mayor" style="border:5px solid #bfbfbf; ">
    <div style="text-align:center;">
      <h3>john</h3>
    </div>
  </a>
</div>

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

enter image description here


Answers:


It's not a border, it's an outline. It appears only on certain browsers like Google Chrome. You can remove it using:

img{ outline: none; }