Borders - Directional Border Utilities

Utilities for applying 1px solid borders to specific edges of elements.

Core Classes

Class	Purpose
`slds-border_top`	Adds a 1px solid border to the top edge
`slds-border_bottom`	Adds a 1px solid border to the bottom edge
`slds-border_left`	Adds a 1px solid border to the left edge
`slds-border_right`	Adds a 1px solid border to the right edge

Properties: All borders use var(--slds-g-sizing-border-1) (1px) width and var(--slds-g-color-border-1) color.

Common Patterns

Section Divider

<!-- Divider between content sections -->
<section class="slds-border_bottom slds-p-vertical_medium">
  <h2>Section Title</h2>
  <p>Section content here</p>
</section>

Accent Bar Card

<!-- Card with colored left accent border -->
<div class="slds-card slds-border_left" style="border-left-width: 4px; border-left-color: var(--slds-g-color-brand-base-60);">
  <div class="slds-card__body">
    <h3>Featured Content</h3>
    <p>Card content with brand accent</p>
  </div>
</div>

Status Message with Border Accent

<!-- Success message with green left border -->
<div class="slds-p-around_medium slds-border_left" style="border-left-width: 4px; border-left-color: var(--slds-g-color-success-base-50);">
  <strong>Success:</strong> Record saved successfully.
</div>

Top Border for Card Header

<!-- Card with top border separator -->
<div class="slds-card">
  <div class="slds-card__header slds-border_top">
    <h2 class="slds-card__header-title">Card Title</h2>
  </div>
  <div class="slds-card__body slds-card__body_inner">
    Card content
  </div>
</div>

Bottom Border for List Items

<!-- List with bottom borders -->
<ul class="slds-has-dividers_bottom-space">
  <li class="slds-item slds-border_bottom slds-p-vertical_small">
    List item one
  </li>
  <li class="slds-item slds-border_bottom slds-p-vertical_small">
    List item two
  </li>
  <li class="slds-item slds-p-vertical_small">
    List item three (no border)
  </li>
</ul>

Best Practices

✅ Use slds-border_bottom for section dividers ✅ Use slds-border_left with 4px width for accent bars on cards and messages ✅ Combine border utilities with spacing utilities for layout control ✅ Use inline styles with design tokens for custom border colors ✅ Use slds-border_top for visual separation in card headers

❌ Never apply multiple directional border classes to the same element ❌ Never use arbitrary color values instead of design tokens ❌ Never override the default 1px width without specific design requirements ❌ Never use border utilities when a component has built-in border styling

Token Reference

Border Tokens

Width: var(--slds-g-sizing-border-1) (1px)
Color: var(--slds-g-color-border-1) (default gray)

Common Color Overrides

Brand: var(--slds-g-color-brand-base-60)
Success: var(--slds-g-color-success-base-50)
Warning: var(--slds-g-color-warning-base-60)
Error: var(--slds-g-color-error-base-50)

Box Utilities - For containers with borders and padding, see Box Utilities
Spacing Utilities - For padding and margins, see Margin and Padding utilities

4.0 KiB Raw Blame History