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
<div class="demo-item ecl-u-border-all ecl-u-border-width-1">.ecl-u-border-width-1</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2">.ecl-u-border-width-2</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-4">.ecl-u-border-width-4</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-8">.ecl-u-border-width-8</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-0">.ecl-u-border-width-0</div>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
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-grey">.ecl-u-border-color-grey</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-blue">.ecl-u-border-color-blue</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-yellow">.ecl-u-border-color-yellow</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-red">.ecl-u-border-color-red</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-grey-20">.ecl-u-border-color-grey-20
</div>Border style
.ecl-u-border-style-solid
.ecl-u-border-style-dashed
.ecl-u-border-style-dotted
<div class="demo-item ecl-u-border-all ecl-u-border-style-solid">.ecl-u-border-style-solid</div>
<div class="demo-item ecl-u-border-all ecl-u-border-style-dashed">.ecl-u-border-style-dashed</div>
<div class="demo-item ecl-u-border-all ecl-u-border-style-dotted">.ecl-u-border-style-dotted</div>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
<div class="demo-item ecl-u-border-all ecl-u-border-radius-0">.ecl-u-border-radius-0</div>
<div class="demo-item ecl-u-border-all ecl-u-border-radius-1">.ecl-u-border-radius-1</div>
<div class="demo-item ecl-u-border-all ecl-u-border-radius-2">.ecl-u-border-radius-2</div>
<div class="demo-item ecl-u-border-all ecl-u-border-radius-4">.ecl-u-border-radius-4</div>
<div class="demo-item ecl-u-border-all ecl-u-border-radius-8">.ecl-u-border-radius-8</div>