Borders
Use these classes to change an element's border appearance.
Color
Applies a border color based on color palette
bc--<color>
| Class | Property & Value |
|---|---|
bc--none | border-color: none |
bc--white | border-color: $white |
bc--white-alpha | border-color: $white-alpha |
bc--black | border-color: $black |
bc--black-alpha | border-color: $black-alpha |
bc--gray | border-color: $gray |
bc--gray-50 | border-color: $gray-50 |
bc--gray-100 | border-color: $gray-100 |
bc--gray-200 | border-color: $gray-200 |
bc--gray-300 | border-color: $gray-300 |
bc--gray-400 | border-color: $gray-400 |
bc--gray-500 | border-color: $gray-500 |
bc--gray-600 | border-color: $gray-600 |
bc--gray-700 | border-color: $gray-700 |
bc--gray-800 | border-color: $gray-800 |
bc--gray-900 | border-color: $gray-900 |
bc--red | border-color: $red |
bc--red-dark | border-color: $red-dark |
bc--red-light | border-color: $red-light |
bc--orange | border-color: $orange |
bc--yellow | border-color: $yellow |
bc--green | border-color: $green |
bc--teal | border-color: $teal |
bc--blue | border-color: $blue |
bc--blue-dark | border-color: $blue-dark |
bc--purple | border-color: $purple |
bc--beige | border-color: $beige |
Radius
Defines the radius of the element's corners
br<loc>--<value>
| Class | Property & Value |
|---|---|
br,bra | border-radius: $border-radius |
brtl | border-top-left-radius: $border-radius |
brtr | border-top-right-radius: $border-radius |
brbl | border-bottom-left-radius: $border-radius |
brbr | border-bottom-right-radius: $border-radius |
br--0,bra--0 | border-radius: 0 |
brtl--0 | border-top-left-radius: 0 |
brtr--0 | border-top-right-radius: 0 |
brbl--0 | border-bottom-left-radius: 0 |
brbr--0 | border-bottom-right-radius: 0 |
br--pill,br--round,br--circle | border-radius: 9999px |
Style
Defines the style of an element's four borders
bs--<style>
| Class | Property & Value |
|---|---|
bs--none | border-style: none |
bs--solid | border-style: solid |
bs--dashed | border-style: dashed |
bs--dotted | border-style: dotted |
Width
Defines the width an element's four borders
bw<loc>--<value>
| Class | Property & Value |
|---|---|
bw--0,bwa--0 | border-width: 0td, th { border-width: 0 0 1px } |
bwt--0 | border-top-width: 0 |
bwr--0 | border-right-width: 0 |
bwb--0 | border-bottom-width: 0 |
bwl--0 | border-left-width: 0 |
bw--1,bwa--1 | border-width: 1px |
bwt--1 | border-top-width: 1px |
bwr--1 | border-right-width: 1px |
bwb--1 | border-bottom-width: 1px |
bwl--1 | border-left-width: 1px |
bw--2,bwa--2 | border-width: 2pxtd, th { border-width: 2px } |
bwt--2 | border-top-width: 2px |
bwr--2 | border-right-width: 2px |
bwb--2 | border-bottom-width: 2px |
bwl--2 | border-left-width: 2px |
bw--3,bwa--3 | border-width: 3px |
bwt--3 | border-top-width: 3px |
bwr--3 | border-right-width: 3px |
bwb--3 | border-bottom-width: 3px |
bwl--3 | border-left-width: 3px |
bw--4,bwa--4 | border-width: 4px |
bwt--4 | border-top-width: 4px |
bwr--4 | border-right-width: 4px |
bwb--4 | border-bottom-width: 4px |
bwl--4 | border-left-width: 4px |