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"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-width-1</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-2"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-width-2</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-4"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-width-4</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-8"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-width-8</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-0"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-width-0</p> </div>
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
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-dark"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-dark</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-primary"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-primary</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-secondary"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-secondary</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-error"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-error</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-neutral-60"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-neutral-60</p> </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"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-style-solid</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-style-dashed"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-style-dashed</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-style-dotted"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-style-dotted</p> </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"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-radius-0</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-radius-1"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-radius-1</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-radius-2"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-radius-2</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-radius-4"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-radius-4</p> </div> <div class="demo-item ecl-u-border-all ecl-u-border-radius-8"> <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-radius-8</p> </div>