The role of borders

The width, style, and colour of the borders can be specified all at once using the border property (border), or as three individual properties border-width, border-style, and border-color.

p {
    border: 2px solid black;
}

td {
    border-width: 3px;
    border-style: dashed;
    border-color: red;
}

Glimpse of the future

There are additional options allowing the top, right, bottom, and left borders to be styled separately. We will consider these options shortly.

Borders are most often specified using pixels; other options include the following preset terms:

  • thin
  • medium
  • thick

Possible values for border-style include:

  • solid
  • dotted
  • dashed
  • double
  • groove