Create Horizontal Line In LWC Using SLDS Class

To create horizontal and vertical line in slds using border classes. These slds classes are very useful for creating line in lightning web components. 

Horizontal Line Using SLDS Class

To add horizontal line use slds-border_bottom or slds-border_top.
<div class="slds-border_top">This should have a top border.</div>
<div class="slds-border_bottom">This should have a bottom border.</div>

Vertical Line Using SLDS Class

To add vertical lines use slds-border_left or slds-border_right
<div class="slds-border_right">This should have a right border.</div>
<div class="slds-border_left">This should have a left border.</div>
Labels:
LWC
Join the conversation