Borders

The border property

The border surrounds an element between the padding and margin. We can use it to draw an edge around an element. We use the border-width, border-style, and border-color properties to define our border.

Border width

The border-width property defines the border’s thickness.

p {
  border-width: 2px;
}

Alternatively, we could set each edge (top -> right -> bottom -> left) separately, like so:

p {
  border-width: 2px 1px 2px 1px;
}

We can also use the following values:

• The thin value is 1px
• The medium value is 3px
• The thick value is 5px

We can also use em, rem, percentages, or any other CSS unit value.

Border style

The border-style property specifies the type of line for our border.

There are many different values we can use:

• The none value is the default (no border is displayed).
• The solid value designates a solid line.
• The hidden value says that a line has been drawn but isn’t set to visible. It could be used to add some extra width without displaying a border.
• The dashed value designates a dashed line.
• The dotted value designates a dotted line.
• The double value draws two straight lines around the element.
• The groove value displays a border with a carved appearance. This makes the element look pressed into the page.
• The ridge value is the opposite of groove, producing a raised effect.
• The inset value makes the element appear embedded.
• The outset value is the opposite of inset, producing an embossed effect.

Multiple border-style values can be combined. For example:

p {
  border-style: none dashed solid dashed;
}

This example gives p no top border, a dashed right border, a solid bottom border, and a dashed left border.

Border color

The border-color property defines the border’s color. Any valid color can be passed to this value. If we don’t set a color, the border will default to the color of the text in the element.

p {
  border-color: red;
}

We could also select the color of each edge (top -> right -> bottom -> left) separately, as shown below:

p {
  border-color: red green yellow blue;
}

Applying borders to specific sides

If we want to apply properties to individual sides, we can specify the side in the following way:

• border-top
• border-right
• border-bottom
• border-left

And to style each side individually, we can approach it in a similar way:

• border-top-width
• border-top-style
• border-top-color
• border-right-width
• border-right-style
• border-right-color
• border-bottom-width
• border-bottom-style
• border-bottom-color
• border-left-width
• border-left-style
• border-left-color

The border shorthand

Thankfully we can set these properties all at once using the border shorthand. The syntax is structured in the following way:

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

For example, if we want a solid red border that is 5px in thickness around our element, then the code should look like this:

border: 5px solid red;

Note: When using the shorthand method, individual sides can’t be set to different lengths.

Example