border

Information desk » CSS » Properties » B » border

Last updated on September 03, 2014

Every element on a page is a rectangular box. All the way from the root <html> element to the lowly <i> element. You can apply a border to any of those rectangular boxes with theborder property. Here’s a classic example of a box with a border:

.box {
  width: 200px;
  height: 100px;
  border: 3px solid red;
  background: #eee;
}

The above was the shorthand syntax, in the format:

border:  <border-width> || <border-style> || <color>

It could have been expressed through each individual property:

.box {
  border-width: 3px;   /* defaults to medium */
  border-color: red;   /* defaults to color (literally, the color property) */
  border-style: solid; /* defaults to none */
}