Utilities

Border

Draw borders

.ecl-u-border-all
.ecl-u-border-top
.ecl-u-border-right
.ecl-u-border-bottom
.ecl-u-border-left
<div class="demo-item ecl-u-border-all">.ecl-u-border-all</div>
<div class="demo-item ecl-u-border-top">.ecl-u-border-top</div>
<div class="demo-item ecl-u-border-right">.ecl-u-border-right</div>
<div class="demo-item ecl-u-border-bottom">.ecl-u-border-bottom</div>
<div class="demo-item ecl-u-border-left">.ecl-u-border-left</div>

Border width

.ecl-u-border-width-1

.ecl-u-border-width-2

.ecl-u-border-width-4

.ecl-u-border-width-8

.ecl-u-border-width-0

Border colour

Note: this list is not exhaustive, please read the usage page to know available colours.

.ecl-u-border-color-dark

.ecl-u-border-color-primary

.ecl-u-border-color-secondary

.ecl-u-border-color-error

.ecl-u-border-color-neutral-60

Border style

.ecl-u-border-style-solid

.ecl-u-border-style-dashed

.ecl-u-border-style-dotted

Border radius

.ecl-u-border-radius-0

.ecl-u-border-radius-1

.ecl-u-border-radius-2

.ecl-u-border-radius-4

.ecl-u-border-radius-8