title: Border of div bound to routerlink directive?
body: <p>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. </p>
  
  <p>I've put together a basic demo of the issue here - <a href="https://github.com/DavidStreid/routingIssue" rel="noreferrer">https://github.com/DavidStreid/routingIssue</a>. 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.</p>
  
  <pre><code>        &lt;div *ngFor="let greeting of greetings" 
              class="col-xs-12 col-md-6 col-lg-4"&gt;
              &lt;div class="paddingDiv"
                  [routerLink]="greeting.routerLink"&gt;
                          &lt;h3 class="greetingType"&gt;{{greeting.title}}&lt;/h3&gt;    
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:
  Here's an updated version from unitario's suggestion where I still see the blue border - </p>
  
  <pre><code>        &lt;a *ngFor="let greeting of greetings" 
              class="col-xs-12 col-md-6 col-lg-4"&gt;
              &lt;a class="paddingDiv"
                  (click)="onSelect(greeting)"&gt;
                          &lt;h3 class="greetingType"&gt;{{greeting.title}}&lt;/h3&gt;    
              &lt;/a&gt;
          &lt;/a&gt;
  </code></pre>
  
  <p>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 - </p>
  
  <pre><code>    .paddingDiv:focus {
          outline: 0;
          background-color: black;
      }
  </code></pre>