<div>
  <h1>Focus styling</h1>
  <a href="#" class="style1">Focus style #1</a>
  <a href="#" class="style2">Focus style #2</a>
  <a href="#" class="style3">Focus style #3</a>
  <a href="#" class="style4">Focus style #4</a>
  <a href="#" class="style5">Focus style #5</a>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {
  font-family: "Open Sans", sans-serif;
  margin: 2rem;
}

a {
  float: left;
  clear: both;
  margin-bottom: 1rem;
  text-decoration: none;
  color: #000000;
}

/* Removing the browser default focus styling for demo purposes - don't do this! */
a:focus {
  outline: none;
}

/* Adds the browser default styling back */
a.style1:focus {
  outline: auto 5px Highlight; /* for non-webkit browsers */
  outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */
}

/* Adds a thick green rounded outline */
a.style2:focus {
  outline: 0.5rem solid #25aa00;
  border-radius: 5px;
}

/* Adds a medium-sized dotted purple outline */
a.style3:focus {
  outline: medium dashed #bf40bf;
}

/* Adds a blue wavy underline */
a.style4:focus {
  text-decoration: wavy underline 2px #0000ff;
}

/* Adds a green background */
a.style5:focus {
  background-color: #25aa00;
}