🎓 A1Learner
🔍

CSS Borders

A CSS border is a line drawn around an element. The border properties set the style, width and colour of that line.

Set all three parts

Three longhand properties build the border. The style must be set, or no line appears.

.box {
  border-style: solid;
  border-width: 3px;
  border-color: blue;
}

One side only

Each side has its own longhand properties. This rule draws a line under the heading only.

h1 {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: red;
}

Different sides, different styles

The top and bottom sides can carry different patterns. Each side keeps its own colour too.

.box {
  border-top-style: solid;
  border-bottom-style: dotted;
  border-top-width: 3px;
  border-bottom-width: 3px;
  border-top-color: blue;
  border-bottom-color: red;
}

Example

.box {
  border-style: solid;
  border-width: 4px;
  border-color: blue;
}
h1 {
  border-bottom-style: dotted;
  border-bottom-width: 3px;
  border-bottom-color: red;
}
p.intro {
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: green;
}

Key points

  • border-style: the property that sets the pattern of the line
  • border-width: the property that sets the thickness of the line
  • border-color: the property that sets the colour of the line
  • A border with the style value none stays invisible at any width.
  • The width also takes the keyword values thin, medium and thick.
  • The background stops at the border.

In this example, the box gets a solid blue border on all four sides. The heading gets a dotted red line along its bottom side only. The intro paragraph gets a solid green line along its left side only. Each side property acts on its own side.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

A border has a width of 5px but nothing appears. Which setting can cause that?