Border Properties

Since 1.5.0

Class

.border--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

.border--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

Code Sample

.border--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

<div class="border--1 bg--gainsboro rounded--6 pa--2">.border--1</div>
<div class="border--5 bg--gainsboro rounded--6 pa--2">.border--5</div>
<div class="border--10 bg--gainsboro rounded--6 pa--2">.border--10</div>

.border--{t | r | b | l}--{1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10}

<div class="border--t--5 bg--gainsboro rounded--6 pa--2">.border--t--5</div>
<div class="border--r--5 bg--gainsboro rounded--6 pa--2">.border--r--5</div>
<div class="border--b--5 bg--gainsboro rounded--6 pa--2">.border--b--5</div>
<div class="border--l--5 bg--gainsboro rounded--6 pa--2">.border--l--5</div>

Variable

Class	Properties
.border--1	border: 1px solid
.border--2	border: 2px solid
.border--3	border: 3px solid
.border--4	border: 4px solid
.border--5	border: 5px solid
.border--6	border: 6px solid
.border--7	border: 7px solid
.border--8	border: 8px solid
.border--9	border: 9px solid
.border--10	border: 10px solid