Border Shorthand

An example of why it's sometimes important to use shorthand.

by Adam Back

HTML

<div id="shortHand">SH</div>
<div id="longHand">LH</div>

CSS

body {
  background-color: black;
  color: blue;
}

#shortHand,
#longHand {
  background-color: transparent;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}

#shortHand {
  border: 1px solid white;
}

#longHand {
  border-color: white;
  border-width: 1px;
}