CSS Border Shorthand

The border shorthand lets you set width, style, and color for all four sides in one line instead of writing three separate declarations every time.

In this page:

The Shorthand Syntax
Value Order Flexibility
Shorthand Resets Unspecified Values
Combining Shorthand With Per-Side Overrides
border vs border-image

The Shorthand Syntax

border: width style color combines border-width, border-style, and border-color into one declaration, applied identically to all four sides. Only border-style is strictly required for anything to render; width and color have sensible defaults (medium and currentColor) if omitted.

Example: The Shorthand Syntax

css

<style>
.box {
  border: 2px solid red;
}
</style>
<div class="box">Width, style, and color together</div>

Value Order Flexibility

Unlike some CSS shorthands, border's three values can technically appear in any order since each value's type (a length, a style keyword, or a color) is unambiguous — but width-style-color is the near-universal convention for readability.

Example: Value Order Flexibility

css

<style>
.box {
  border: red solid 2px;
}
</style>
<div class="box">Order doesn't matter, each value's type is unambiguous</div>

Shorthand Resets Unspecified Values

Using the border shorthand resets ALL of border-width, border-style, and border-color to their defaults for any value you don't include — so border: solid red alone resets width back to medium even if a wider border-width was set earlier in the cascade.

Example: Shorthand Resets Unspecified Values

css

<style>
.box {
  border-width: 10px;
  border: solid red;
}
</style>
<div class="box">border-width silently reset back to medium</div>

Combining Shorthand With Per-Side Overrides

A common pattern is setting border as the shorthand baseline for all sides, then overriding just one side afterward with border-left or border-top — the later, more specific side rule wins for that edge only.

Example: Combining Shorthand With Per-Side Overrides

css

<style>
.box {
  border: 2px solid black;
  border-left: 6px solid teal;
}
</style>
<div class="box">Shorthand baseline, left side overridden</div>

border vs border-image

The border shorthand only handles solid-color borders; achieving a patterned or image-based border (like a dotted line made of icons) requires the separate border-image property instead, which border does not control.

Example: border vs border-image

css

<style>
.solid {
  border: 10px solid black;
}
.image {
  border: 10px solid transparent;
  border-image: url('https://placehold.co/60x60') 20;
}
</style>
<div class="solid">Plain solid border</div>
<div class="image">border-image handles the pattern instead</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Border Sides Next Lesson → CSS Margins