Why does autofocus leave a dotted line around the button?

Question

I have a button group and I'm trying to set the first button in it to be active when the page loads. I'm not using .active because then when I press the other buttons the active stays on that first button and I would then need to use JS to change the state of the buttons. So I'm using autofocus as an attribute. Like this.

<div id="resultOption" class="btn-group btn-group-lg" role="group" aria-label="...">
                <button type="button" class="btn btn-default" autofocus>Events</button>
                <button type="button" class="btn btn-default">Hosts</button>
                <button type="button" class="btn btn-default">Teachers</button>
            </div>

but when I load the page there is a weird dotted line around the button like this

If I click the button or another button it goes away, but it looks bad and I don't want this weird dotted line.

I'm using IE 11

Answer 1

Try setting the outline attribute in CSS to 0 or none.

Example:

:focus { outline: none; }