border

border sets width, style, and color on all four sides. Width and color alone do not create a visible border: the omitted style resets to none.

Supply a visible style

The first box has a width and color but no style, so it has no border. The second adds solid.

<div class="sample missing">Missing border style</div>
<div class="sample visible">Solid border</div>

.sample {
  padding: 1rem;
  margin-block: 0.5rem;
  background: #eff6ff;
}
.missing {
  border: 3px #2563eb;
}
.visible {
  border: 3px solid #2563eb;
}

Mark a note with a logical edge

A full border supplies the box boundary; border-inline-start then changes one logical side. It follows the writing direction instead of assuming left.

<p class="note">Change one declaration and compare the result.</p>

.note {
  padding: 1rem;
  border: 1px solid #94a3b8;
  border-inline-start: 5px solid #2563eb;
}

Syntax, defaults, and resets

Supply up to three components in any order: a nonnegative width (or thin/medium/thick), a style, and a color. Omitted components reset to medium, none, and currentColor. These properties are not inherited. Border also resets border-image to its initial values.

Unlike margin, border does not accept four side-specific groups. Use border-width/style/color for one-to-four values, or a side shorthand such as border-top or border-inline-start. Negative widths and percentage widths are invalid.

Why sizing changes

Borders take part in the box model. With content-box, they add to the specified content width; with border-box, they fit within the specified outer width. Changing border width on focus can move neighboring content. An outline adds a focus indicator without that layout change.

Learn border-radius and border-image.

Sources and browser support

MDN: border describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.