Border - Utilities

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-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">
  <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-grey</p>
</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-blue">
  <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-blue</p>
</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-yellow">
  <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-yellow</p>
</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-red">
  <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-red</p>
</div>
<div class="demo-item ecl-u-border-all ecl-u-border-width-2 ecl-u-border-color-grey-20">
  <p class="iRCJJeCgSXzX9ymLg1TH">.ecl-u-border-color-grey-20</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>