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.