Border of div bound to routerlink directive?

Question

I have encountered an issue where divs using routerLink get bordered with blue when clicked. I think I am missing something very obvious, possibly even a configuration I have in my browser or some missed css styling, so a polite explanation of the fix would be appreciated if so.

I've put together a basic demo of the issue here - https://github.com/DavidStreid/routingIssue. The code snippet creating this issue is at src/app/allGreetings.component.html and I put it below. Just download and "npm install; npm start" from the root, /routingIssue, to see the issue by clicking on the different greetings. I'm seeing this in chrome.

        <div *ngFor="let greeting of greetings" 
            class="col-xs-12 col-md-6 col-lg-4">
            <div class="paddingDiv"
                [routerLink]="greeting.routerLink">
                        <h3 class="greetingType">{{greeting.title}}</h3>    
            </div>
        </div>

EDIT: Here's an updated version from unitario's suggestion where I still see the blue border -

        <a *ngFor="let greeting of greetings" 
            class="col-xs-12 col-md-6 col-lg-4">
            <a class="paddingDiv"
                (click)="onSelect(greeting)">
                        <h3 class="greetingType">{{greeting.title}}</h3>    
            </a>
        </a>

SOLUTION: From Shota Papiashvili. The outline comes from the focus selector. I don't want the border so I eliminated it and added another focus style -

    .paddingDiv:focus {
        outline: 0;
        background-color: black;
    }

Answer 1

its css outline property, this is very important for accessibility, you can read more at: http://www.outlinenone.com/

if you still want to do it just add

.paddingDiv:focus {
  outline: 0;
}

to your css