Add Styling to Keyboard Keys with CSS

In one of my jobby-jobs, I write user educational articles and record screencasts for a software company. We often instruct readers to press keyboard keys to accomplish some task. Our original styling looked something like this:

Press Cmd + C to copy.

I went in search for some better styling and here’s the result:

Press Cmd + C to copy.

KBD Element

According to the MDN Web Docs, the <kbd> element “represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.”

I wrap each key in a <kbd> element, like this: <kbd>Enter</kbd>

CSS Styling

I liked the styling MDN uses for the <kbd> element, so I grabbed it an made a few modifications to better mach my style. See mine below.

kbd {
  border: 2px solid black;
  box-shadow: 2px 2px black;
  font-size: .85em;
  line-height: .85em;
  display: inline-block;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 3px 5px;
  white-space: nowrap;
}

Note: Since writing this article, I’ve made some changes to how I style the kbd element. But this styling above will still produce a great result!