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.