CSS Border Width

Border width is simply how thick the border line is drawn, set either with a keyword like thin or medium, or with an exact length like 3px.

In this page:

Keyword Widths
Length-Based Widths
Border Width Requires a Style
Per-Side Widths
Width in the Shorthand

Keyword Widths

border-width accepts the keywords thin, medium (the default), and thick. These map to browser-defined pixel values that aren't identical across browsers, so for pixel-precise designs an explicit length unit is generally preferred over the keywords.

Example: Keyword Widths

css

<style>
.thin { border: thin solid black; }
.medium { border: medium solid black; }
.thick { border: thick solid black; }
</style>
<div class="thin">thin</div>
<div class="medium">medium</div>
<div class="thick">thick</div>

Length-Based Widths

Any CSS length unit works for border-width: px for exact pixel control, em/rem to scale with font size, or percentages are notably NOT allowed for border-width (unlike padding/margin).

Example: Length-Based Widths

css

<style>
.px { border: 3px solid black; }
.rem { border: 0.2rem solid black; }
</style>
<div class="px">3px</div>
<div class="rem">0.2rem</div>

Border Width Requires a Style

Just like color, a border-width value has no visible effect unless border-style is also set to something other than none — width alone doesn't make a border appear.

Example: Border Width Requires a Style

css

<style>
.no-style { border-width: 5px; }
.with-style { border-width: 5px; border-style: solid; }
</style>
<div class="no-style">Invisible: no border-style</div>
<div class="with-style">Visible</div>

Per-Side Widths

border-top-width, border-right-width, border-bottom-width, and border-left-width set each side's thickness independently, letting you build asymmetric borders like a thick left accent bar with thin borders elsewhere.

Example: Per-Side Widths

css

<style>
.box {
  border-style: solid;
  border-left-width: 8px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
</style>
<div class="box">Thick left accent bar</div>

Width in the Shorthand

Inside the border shorthand (border: width style color), width can be a keyword or length and must come first if all three values are present, though the shorthand also tolerates omitting values.

Example: Width in the Shorthand

css

<style>
.box {
  border: 4px solid navy;
}
</style>
<div class="box">Width comes first in the shorthand</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Border Style Next Lesson → CSS Border Color