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-grey

.ecl-u-border-color-blue

.ecl-u-border-color-yellow

.ecl-u-border-color-red

.ecl-u-border-color-grey-20

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