css-utils

Borders

Add or remove an element’s border.

Default

Add borders to elements.

border border-primary

border border-secondary

border border-warning

border border-success

border border-error

<div class="border border-primary">border border-primary</div>
<div class="border border-secondary">border border-secondary</div>
<div class="border border-warning">border border-warning</div>
<div class="border border-success">border border-success</div>
<div class="border border-error">border border-error</div>

Widths

Apply border widths by using border-* (0 to 5).

border-0

border-1

border-2

border-3

border-4

border-5

<div class="border border-0 border-primary">border border-0 border-primary</div>
<div class="border border-1 border-primary">border border-1 border-primary</div>
<div class="border border-2 border-primary">border border-2 border-primary</div>
<div class="border border-3 border-primary">border border-3 border-primary</div>
<div class="border border-4 border-primary">border border-4 border-primary</div>
<div class="border border-5 border-primary">border border-5 border-primary</div>

Directions

Add borders to specific directions of elements.

border-t border-primary

border-s border-primary

border-e border-primary

border-b border-primary

<div class="border-t border-primary">border-t border-primary</div>
<div class="border-s border-primary">border-s border-primary</div>
<div class="border-e border-primary">border-e border-primary</div>
<div class="border-b border-primary">border-b border-primary</div>

Substract specific direction

Remove borders to specific directions of elements.

border border-primary border-t-0

<div class="border border-primary border-t-0">border border-primary border-t-0</div>

Previous: Utilities

← Typography

Next: Utilities