How to add a border to one side
Short answer
Each side has its own property: border-top, border-right, border-bottom, border-left:
<blockquote style="margin: 0; padding: 8px 16px; border-left: 4px solid royalblue; background: aliceblue;">Simple things should be simple.</blockquote>The value is the same as for border: width, style and color.
A line under a heading
<h3 style="padding-bottom: 6px; border-bottom: 2px solid gold;">Latest news</h3>Removing one side
You can set a border on all sides and remove the one you do not need:
<div style="border: 2px solid silver; border-top: none; padding: 8px;">No top border</div>Logical sides
border-inline-start is "the border at the start of the line": on the left for English, on the right for Arabic and Hebrew. If the site is translated into right-to-left languages, use logical properties.
Common mistake
People try to draw a one-sided border with border: 0 0 2px 0 — that does not work: border does not take four values. Four values belong to border-width: border-width: 0 0 2px; border-style: solid;.
Functions used in this recipe
- border — A border around the element: width, style and color in one property.
- border-radius — Rounds the corners of an element.
- padding — The inner spacing between the content and the border of an element.