Individual Border Sides

CSS provides longhand properties for each side of the border independently: border-top, border-right, border-bottom, and border-left. Each is itself a shorthand for its own width, style, and colour.

When to Use

Individual sides are useful for decorative accents, underlines, dividers, and left-edge indicators — without affecting the other three sides.

Mixing Styles

You can combine different styles on different sides for creative effects, though consistency is usually preferred for UI components.

Logical Properties

Modern CSS provides logical equivalents: border-block-start, border-block-end, border-inline-start, and border-inline-end — these adapt to writing direction automatically.

Example

/* Underline accent on a heading */
.section-title {
    border-bottom: 3px solid #1a73e8;
    padding-bottom: 0.4em;
    display: inline-block;
}

/* Left accent bar for a blockquote */
blockquote {
    border-left: 4px solid #bdbdbd;
    margin-left: 0;
    padding-left: 1.5rem;
    color: #555;
}

/* Active nav indicator — bottom only */
.nav-item.active {
    border-bottom: 3px solid currentColor;
    color: #1a73e8;
}

/* Table cell borders — horizontal only */
td, th {
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 12px;
}

/* Logical border for RTL support */
.sidebar-item {
    border-inline-start: 4px solid transparent;
}
.sidebar-item.active {
    border-inline-start-color: #1a73e8;
}

CSS

Full Editor

Pro Tip

Use logical border properties like border-inline-start instead of border-left if your site supports right-to-left languages — the border will automatically flip to the correct side without extra CSS.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned