CSS Border Sides
CSS offers per-side border properties so you can style a single edge of an element on its own.
Targeting one edge
Alongside the all-sides border properties, CSS provides side-specific ones: <border-top>, <border-right>, <border-bottom>, and <border-left>. Each works like the full border shorthand but affects only that one edge.
An underline heading
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-bottom: 2px solid #00643c;
padding-bottom: 8px;
}
</style>
</head>
<body>
<h2>Section Title</h2>
</body>
</html>A common pattern
A single bottom border is a popular way to underline a heading or separate sections without the heavy look of a full box. A left border makes a clean accent bar for quotes and callouts.
A quote accent
<!DOCTYPE html>
<html>
<head>
<style>
blockquote {
border-left: 4px solid #00643c;
padding-left: 16px;
color: #555;
}
</style>
</head>
<body>
<blockquote>Simplicity is the ultimate sophistication.</blockquote>
</body>
</html>The side sub-properties
- Each side property takes width, style, and color like the full shorthand
- Great for underlines, dividers, and accent bars
- You can also target a single property, such as border-top-color
Note: To style all four edges the same way at once, use the border shorthand instead.
