Border Color
Utilities for controlling the color of an element's borders.
| Class | Properties | |
|---|---|---|
| border-transparent | color: 'transparent' | |
| border-black | color: '#22292f' | |
| border-grey-darkest | color: '#3d4852' | |
| border-grey-darker | color: '#606f7b' | |
| border-grey-dark | color: '#8795a1' | |
| border-grey | color: '#b8c2cc' | |
| border-grey-light | color: '#dae1e7' | |
| border-grey-lighter | color: '#f1f5f8' | |
| border-grey-lightest | color: '#f8fafc' | |
| border-white | color: '#ffffff' | |
| border-red-darkest | color: '#3b0d0c' | |
| border-red-darker | color: '#621b18' | |
| border-red-dark | color: '#cc1f1a' | |
| border-red | color: '#e3342f' | |
| border-red-light | color: '#ef5753' | |
| border-red-lighter | color: '#f9ac' | |
| border-red-lightest | color: '#fcebea' | |
| border-orange-darkest | color: '#462a16' | |
| border-orange-darker | color: '#613b1f' | |
| border-orange-dark | color: '#de751f' | |
| border-orange | color: '#f6993f' | |
| border-orange-light | color: '#fd63' | |
| border-orange-lighter | color: '#fcd9b6' | |
| border-orange-lightest | color: '#fff5eb' | |
| border-yellow-darkest | color: '#453411' | |
| border-yellow-darker | color: '#684f1d' | |
| border-yellow-dark | color: '#f2d024' | |
| border-yellow | color: '#ffed4a' | |
| border-yellow-light | color: '#fff382' | |
| border-yellow-lighter | color: '#fff9c2' | |
| border-yellow-lightest | color: '#fcfbeb' | |
| border-green-darkest | color: '#0f2f21' | |
| border-green-darker | color: '#1a4731' | |
| border-green-dark | color: '#1f9d55' | |
| border-green | color: '#38c172' | |
| border-green-light | color: '#51d88a' | |
| border-green-lighter | color: '#a2f5bf' | |
| border-green-lightest | color: '#e3fcec' | |
| border-teal-darkest | color: '#0d3331' | |
| border-teal-darker | color: '#20504f' | |
| border-teal-dark | color: '#38a89d' | |
| border-teal | color: '#4dc0b5' | |
| border-teal-light | color: '#64d5ca' | |
| border-teal-lighter | color: '#a0f0ed' | |
| border-teal-lightest | color: '#e8fffe' | |
| border-blue-darkest | color: '#12283a' | |
| border-blue-darker | color: '#1c3d5a' | |
| border-blue-dark | color: '#2779bd' | |
| border-blue | color: '#3490dc' | |
| border-blue-light | color: '#6cb2eb' | |
| border-blue-lighter | color: '#bcdefa' | |
| border-blue-lightest | color: '#eff8ff' | |
| border-indigo-darkest | color: '#191e38' | |
| border-indigo-darker | color: '#2f365f' | |
| border-indigo-dark | color: '#5661b3' | |
| border-indigo | color: '#6574cd' | |
| border-indigo-light | color: '#7886d7' | |
| border-indigo-lighter | color: '#b2b7ff' | |
| border-indigo-lightest | color: '#e6e8ff' | |
| border-purple-darkest | color: '#21183c' | |
| border-purple-darker | color: '#382b5f' | |
| border-purple-dark | color: '#794acf' | |
| border-purple | color: '#9561e2' | |
| border-purple-light | color: '#a779e9' | |
| border-purple-lighter | color: '#d6bbfc' | |
| border-purple-lightest | color: '#f3ebff' | |
| border-pink-darkest | color: '#451225' | |
| border-pink-darker | color: '#6f213f' | |
| border-pink-dark | color: '#eb5286' | |
| border-pink | color: '#f66d9b' | |
| border-pink-light | color: '#fa7ea8' | |
| border-pink-lighter | color: '#ffbbca' | |
| border-pink-lightest | color: '#ffebef' |
Usage
Control the border color of an element using the border-{color} utilities.
Disabling
If you don't plan to use the border-{color} utilities in your project, you can disable them entirely by removing the borderColors property in the modules section of your config file:
{
// ...
modules: {
// ...
- borderColors: {
- prefix: 'border',
- propertyName: 'borderColor'
- }
}
}