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

Syntax

css

selector {
  border-width: thin | medium | thick | length;
}

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.

Note:

Accepted values:
length — any non-negative size like 2px or 0.25rem
thin — usually 1px
medium — usually 3px (default)
thick — usually 5px
Needs a border-style other than none to appear
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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).

Note:

Accepted values:
length — e.g. 1px, 4px or 0.1em
thin | medium | thick — keywords
0 — removes the width
one to four values — top, right, bottom, left order
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:

Accepted values:
length — e.g. 1px, 4px or 0.1em
thin | medium | thick — keywords
0 — removes the width
border-top-width etc. — take one width each
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:

Accepted values:
width — length or thin, medium, thick
style — solid, dashed, dotted, double and others
color — any color value
values may appear in any order
style — required for the border to appear
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Width in the Shorthand

css

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

Live Example

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

CSS Border Width

Keyword Widths

Length-Based Widths

Border Width Requires a Style

Per-Side Widths

Width in the Shorthand

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code