CSS Border Sides

Instead of styling all four edges the same way, CSS lets you target just the top, right, bottom, or left border independently, each with its own width, style, and color.

In this page:

The Four Side Shorthands
Combining Sides for Asymmetric Design
Side Shorthand vs Individual Properties
Removing a Single Side
Order of Precedence

The Four Side Shorthands

border-top, border-right, border-bottom, and border-left each accept the same width-style-color shorthand as the full border property, but apply only to that one side, leaving the others unaffected unless set separately.

Example: The Four Side Shorthands

css

<style>
.box {
  border-top: 4px solid red;
  border-right: 2px dashed blue;
}
</style>
<div class="box">Different width/style/color per side</div>

Combining Sides for Asymmetric Design

Setting different combinations on each side — a thick colored left border with thin gray borders elsewhere — is a common pattern for callout boxes, blockquotes, and active-tab indicators.

Example: Combining Sides for Asymmetric Design

css

<style>
.callout {
  border-left: 6px solid teal;
  border-top: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
</style>
<div class="callout">Thick colored left accent, thin gray elsewhere</div>

Side Shorthand vs Individual Properties

border-top is itself shorthand for border-top-width, border-top-style, and border-top-color; you can mix the side shorthand for most sides with individual width/style/color properties when you only need to override one aspect of one side.

Example: Side Shorthand vs Individual Properties

css

<style>
.box {
  border-top: 3px solid black;
  border-top-color: red;
}
</style>
<div class="box">Shorthand baseline, then one aspect overridden</div>

Removing a Single Side

Setting border-bottom: none (or any single side to none) removes just that edge's line while leaving width/style/color on the other three sides untouched — useful for a card that should look open on one edge.

Example: Removing a Single Side

css

<style>
.card {
  border: 2px solid black;
  border-bottom: none;
}
</style>
<div class="card">Open on the bottom edge</div>

Order of Precedence

When both a general border property and a specific side property target the same edge, the more specific per-side declaration wins, following normal CSS cascade rules rather than any special border-specific logic.

Example: Order of Precedence

css

<style>
.box {
  border: 2px solid black;
  border-top: 2px solid red;
}
</style>
<div class="box">The more specific per-side rule wins on top</div>

🔒

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

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