Border Color
Class | Properties | |
---|---|---|
t.borderTransparent | borderColor: 'transparent' | |
t.borderBlack | borderColor: '#000' | |
t.borderWhite | borderColor: '#fff' | |
t.borderGray100 | borderColor: '#f7fafc' | |
t.borderGray200 | borderColor: '#edf2f7' | |
t.borderGray300 | borderColor: '#e2e8f0' | |
t.borderGray400 | borderColor: '#cbd5e0' | |
t.borderGray500 | borderColor: '#a0aec0' | |
t.borderGray600 | borderColor: '#718096' | |
t.borderGray700 | borderColor: '#4a5568' | |
t.borderGray800 | borderColor: '#2d3748' | |
t.borderGray900 | borderColor: '#1a202c' | |
t.borderRed100 | borderColor: '#fff5f5' | |
t.borderRed200 | borderColor: '#fed7d7' | |
t.borderRed300 | borderColor: '#feb2b2' | |
t.borderRed400 | borderColor: '#fc8181' | |
t.borderRed500 | borderColor: '#f56565' | |
t.borderRed600 | borderColor: '#e53e3e' | |
t.borderRed700 | borderColor: '#c53030' | |
t.borderRed800 | borderColor: '#9b2c2c' | |
t.borderRed900 | borderColor: '#742a2a' | |
t.borderOrange100 | borderColor: '#fffaf0' | |
t.borderOrange200 | borderColor: '#feebc8' | |
t.borderOrange300 | borderColor: '#fbd38d' | |
t.borderOrange400 | borderColor: '#f6ad55' | |
t.borderOrange500 | borderColor: '#ed8936' | |
t.borderOrange600 | borderColor: '#dd6b20' | |
t.borderOrange700 | borderColor: '#c05621' | |
t.borderOrange800 | borderColor: '#9c4221' | |
t.borderOrange900 | borderColor: '#7b341e' | |
t.borderYellow100 | borderColor: '#fffff0' | |
t.borderYellow200 | borderColor: '#fefcbf' | |
t.borderYellow300 | borderColor: '#faf089' | |
t.borderYellow400 | borderColor: '#f6e05e' | |
t.borderYellow500 | borderColor: '#ecc94b' | |
t.borderYellow600 | borderColor: '#d69e2e' | |
t.borderYellow700 | borderColor: '#b7791f' | |
t.borderYellow800 | borderColor: '#975a16' | |
t.borderYellow900 | borderColor: '#744210' | |
t.borderGreen100 | borderColor: '#f0fff4' | |
t.borderGreen200 | borderColor: '#c6f6d5' | |
t.borderGreen300 | borderColor: '#9ae6b4' | |
t.borderGreen400 | borderColor: '#68d391' | |
t.borderGreen500 | borderColor: '#48bb78' | |
t.borderGreen600 | borderColor: '#38a169' | |
t.borderGreen700 | borderColor: '#2f855a' | |
t.borderGreen800 | borderColor: '#276749' | |
t.borderGreen900 | borderColor: '#22543d' | |
t.borderTeal100 | borderColor: '#e6fffa' | |
t.borderTeal200 | borderColor: '#b2f5ea' | |
t.borderTeal300 | borderColor: '#81e6d9' | |
t.borderTeal400 | borderColor: '#4fd1c5' | |
t.borderTeal500 | borderColor: '#38b2ac' | |
t.borderTeal600 | borderColor: '#319795' | |
t.borderTeal700 | borderColor: '#2c7a7b' | |
t.borderTeal800 | borderColor: '#285e61' | |
t.borderTeal900 | borderColor: '#234e52' | |
t.borderBlue100 | borderColor: '#ebf8ff' | |
t.borderBlue200 | borderColor: '#bee3f8' | |
t.borderBlue300 | borderColor: '#90cdf4' | |
t.borderBlue400 | borderColor: '#63b3ed' | |
t.borderBlue500 | borderColor: '#4299e1' | |
t.borderBlue600 | borderColor: '#3182ce' | |
t.borderBlue700 | borderColor: '#2b6cb0' | |
t.borderBlue800 | borderColor: '#2c5282' | |
t.borderBlue900 | borderColor: '#2a4365' | |
t.borderIndigo100 | borderColor: '#ebf4ff' | |
t.borderIndigo200 | borderColor: '#c3dafe' | |
t.borderIndigo300 | borderColor: '#a3bffa' | |
t.borderIndigo400 | borderColor: '#7f9cf5' | |
t.borderIndigo500 | borderColor: '#667eea' | |
t.borderIndigo600 | borderColor: '#5a67d8' | |
t.borderIndigo700 | borderColor: '#4c51bf' | |
t.borderIndigo800 | borderColor: '#434190' | |
t.borderIndigo900 | borderColor: '#3c366b' | |
t.borderPurple100 | borderColor: '#faf5ff' | |
t.borderPurple200 | borderColor: '#e9d8fd' | |
t.borderPurple300 | borderColor: '#d6bcfa' | |
t.borderPurple400 | borderColor: '#b794f4' | |
t.borderPurple500 | borderColor: '#9f7aea' | |
t.borderPurple600 | borderColor: '#805ad5' | |
t.borderPurple700 | borderColor: '#6b46c1' | |
t.borderPurple800 | borderColor: '#553c9a' | |
t.borderPurple900 | borderColor: '#44337a' | |
t.borderPink100 | borderColor: '#fff5f7' | |
t.borderPink200 | borderColor: '#fed7e2' | |
t.borderPink300 | borderColor: '#fbb6ce' | |
t.borderPink400 | borderColor: '#f687b3' | |
t.borderPink500 | borderColor: '#ed64a6' | |
t.borderPink600 | borderColor: '#d53f8c' | |
t.borderPink700 | borderColor: '#b83280' | |
t.borderPink800 | borderColor: '#97266d' | |
t.borderPink900 | borderColor: '#702459' |
Usage
Control the border color of an element using the t.border{Color}
utilities.