CSS Individual Borders

You do not have to draw a border on all four sides. Each side has its own property: border-top, border-right, border-bottom and border-left.

1
2
3
4
5
6
7
8
9

<style>
  h2 { border-bottom: 3px solid #d94a00; padding-bottom: 6px; }
  .quote { border-left: 5px solid #1a5276; padding-left: 14px; color: #444; }
  .row { border-top: 1px solid #ddd; padding: 8px 0; }
</style>
<h2>Heading with an underline</h2>
<p class="quote">A quote with a colored bar on the left side.</p>
<div class="row">First row</div>
<div class="row">Second row</div>

Common patterns

• Heading underline: border-bottom.
• Quote or note bar: border-left with some padding-left.
• Dividers between list items: border-top on every item, or border-bottom on all but the last.
• Active tab marker: a thick border-bottom in the brand color.

Longhands for exact control

Each side also has width, style and color properties: border-bottom-width, border-left-color and so on. You can combine a general rule with an exception:

1
2
3
4

.card {
  border: 1px solid #ddd;
  border-top: 4px solid #d94a00;
}

Order matters here. The border-top line comes after border, so it replaces the top side only.