afv-library/skills/applying-slds/guidance/utilities/borders.md

id	title	description	summary	artifact_type	domain	topic	content_format	complexity	audience	tasks	refs	tags	keywords
slds.guidance.utilities.borders	Borders Utilities	SLDS directional border utility classes	Utilities for applying borders to specific edges of elements.	reference	utilities	borders	structured	intermediate	implementer	implement	slds.guidance.utilities slds.guidance.overview.utilities slds.guidance.utilities.box slds.guidance.utilities.margin slds.guidance.utilities.padding slds.guidance.hooks.borders	utilities borders	slds-border_top slds-border_bottom slds-border_left slds-border_right

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)

Related Utilities

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