Borders
The border utilities allow you to quickly style the border properties such as border positions, width, radius, and color.
Additive
Additive classes are used to add borders.
border all sides
border top
border right
border bottom
border left
<div class="ds-border"></div>
<div class="ds-border-top"></div>
<div class="ds-border-right"></div>
<div class="ds-border-bottom"></div>
<div class="ds-border-left"></div>
Border-width
width 1px
width 2px
width 3px
width 4px
width 5px
<div class="ds-border ds-border-width-sm"></div>
<div class="ds-border ds-border-width-md"></div>
<div class="ds-border ds-border-width-lg"></div>
<div class="ds-border ds-border-width-xl"></div>
<div class="ds-border ds-border-width-xxl"></div>
border-color
border-color classes are used to change border colors
primary
secondary
danger
grey
information
<div class="ds-border ds-border-width-lg ds-border-primary">border-primary</div>
<div class="ds-border ds-border-width-lg ds-border-secondary">border-secondary</div>
<div class="ds-border ds-border-width-lg ds-border-danger">border-danger</div>
<div class="ds-border ds-border-width-lg ds-border-grey">border-grey</div>
<div class="ds-border ds-border-width-lg ds-border-information">border-information</div>
Border-radius
Add classes to an element to easily round its corners.
sm
md
lg
xl
xxl
round
pill
<div class="ds-border ds-border-width-sm ds-border-radius-sm"></div>
<div class="ds-border ds-border-width-sm ds-border-radius-md"></div>
<div class="ds-border ds-border-width-sm ds-border-radius-lg"></div>
<div class="ds-border ds-border-width-sm ds-border-radius-xl"></div>
<div class="ds-border ds-border-width-sm ds-border-radius-xxl"></div>
<div class="ds-border ds-border-width-sm ds-border-round"></div>
<div class="ds-border ds-border-width-sm ds-border-round-pill"></div>