Styling <kbd> with CSS

I saw this on Stack Overflow the other day:

Killer KBD Styling

I thought it was well-done styling, so naturally, I popped open Firefox Web Developer tools and snatched the CSS up. Here it is:.

kbd {
  display: inline-block;
  margin: 0 .1em;
  padding: .1em .6em;
  font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #FFF;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12,13,14,0.2),0 0 0 2px #FFF inset;
  white-space: nowrap;

Now, I can say press F5 to refresh the page, or that I have remapped Caps Lock to Ctrl. Pretty neat, eh?

James (@iamjameshunt) works on the Internet, spends his weekends developing new and interesting bits of software and his nights trying to make sense of research papers.

Currently exploring Kubernetes, as both a floor wax and a dessert topping.