Components › Utilities

Borders

Border BottomBorder Bottomdev ready

Preview

Code

<div class="slds-border--bottom">
  <p>This should have a border bottom.</p>
</div>

Border LeftBorder Leftdev ready

Preview

Code

<div class="slds-border--left">
  <p>This should have a border left.</p>
</div>

Border RightBorder Rightdev ready

Preview

Code

<div class="slds-border--right">
  <p>This should have a border right.</p>
</div>

Border TopBorder Topdev ready

Preview

Code

<div class="slds-border--top">
  <p>This should have a border top.</p>
</div>

Component Overview

Use border utility classes to add borders to elements.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-border--bottom
Applied to:

Outcome:

Adds a bottom border to an element.

Required:

No, optional element or modifier

Comments:

--

.slds-border--left
Applied to:

Outcome:

Adds a left border to an element.

Required:

No, optional element or modifier

Comments:

--

.slds-border--right
Applied to:

Outcome:

Adds a right border to an element.

Required:

No, optional element or modifier

Comments:

--

.slds-border--top
Applied to:

Outcome:

Adds a top border to an element.

Required:

No, optional element or modifier

Comments:

--