← Back to CSS Course | Chapter 2: Colors & Backgrounds | Lesson 20 of 21

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:

  1. The Four Side Shorthands
  2. Combining Sides for Asymmetric Design
  3. Side Shorthand vs Individual Properties
  4. Removing a Single Side
  5. Order of Precedence
Syntax
css 
selector {
  border-top: width style color;
  border-right: width style color;
  border-bottom: width style color;
  border-left: width style color;
}

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.

Note:
  • Accepted values:
  • border-top | border-right | border-bottom | border-left — one side each
  • border-inline | border-block — logical axes
  • Each takes width style color, e.g. 2px solid red
  • border-style with 1 to 4 values — different styles per side
  • none — removes that side's border
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • border-top — width style color for the top side
  • border-right — for the right side
  • border-bottom — for the bottom side
  • border-left — for the left side
  • border-block / border-inline — logical equivalents
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.

Note:
  • Accepted values:
  • border-top — width, style and color of one side
  • none — removes the border from that side
  • 0 — zero width, no visible border
  • transparent — invisible but space is kept
  • inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>
Live Example
Related Topics

CSS Border Color · CSS Border Shorthand · CSS Border Width · CSS Border Style

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using border-top: 2px without a style, so the border does not appear.
  2. Setting border: 1px solid and then border-left: none, and expecting the later rule to be ignored, when it overrides only that side.
  3. Placing border-left before a general border rule, so the later shorthand overrides it.
Browser Support

Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.

🔒

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

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.