How to remove blue border around the div

Question

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>

update this on jsfiddle or codepen – Jishnu V S Nov 10 '16 at 11:29 — Jishnu V S, Nov 10 '16 at 11:29
You can use `outline: none;` – Ionut Necula Nov 10 '16 at 11:30 — Ionut Necula, Nov 10 '16 at 11:30

Ionut Necula · Accepted Answer · 2016-11-10T11:55:19.187

13

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; }

edited Nov 10 '16 at 11:55

answered Nov 10 '16 at 11:31

Ionut Necula

11,107
4
45
69

@lonut not working – sting Nov 10 '16 at 11:41
When it's that border appearing? On page load or on click/focus of element? And what browser are you using? – Ionut Necula Nov 10 '16 at 11:42
@lonut i just added a:focus { outline: none; } now its working :) – sting Nov 10 '16 at 11:50
That's why I was asking about when it appears. Glad it works. @sting, it should also work without focus. – Ionut Necula Nov 10 '16 at 11:55

How to remove blue border around the div

1 Answers1