Border

Border Width

Border width value is based on the borderWidth config. You can override this property value to match your style

Class	Style
b-0	borderWidth : 0
b-1	borderWidth : 1
b-2	borderWidth : 2
b-4	borderWidth : 4
b-8	borderWidth : 8
bt-0	borderTopWidth : 0
bt-1	borderTopWidth : 1
bt-2	borderTopWidth : 2
bt-4	borderTopWidth : 4
bt-8	borderTopWidth : 8
br-0	borderRightWidth : 0
br-1	borderRightWidth : 1
br-2	borderRightWidth : 2
br-4	borderRightWidth : 4
br-8	borderRightWidth : 8
bb-0	borderBottomWidth : 0
bb-1	borderBottomWidth : 1
bb-2	borderBottomWidth : 2
bb-4	borderBottomWidth : 4
bb-8	borderBottomWidth : 8
bl-0	borderLeftWidth : 0
bl-1	borderLeftWidth : 1
bl-2	borderLeftWidth : 2
bl-4	borderLeftWidth : 4
bl-8	borderLeftWidth : 8

Border Color

The class for border color follow this format: border-[color]-[shade], you can checkout Color reference for available color value and it's shades

Class	Style
border-transparent	borderColor: transparent
border-black	borderColor: #000
border-white	borderColor: #fff
border-gray-100	borderColor: #f7fafc
border-gray-200	borderColor: #edf2f7
border-gray-300	borderColor: #e2e8f0
border-gray-400	borderColor: #cbd5e0
border-gray-500	borderColor: #a0aec0
border-gray-600	borderColor: #718096
border-gray-700	borderColor: #4a5568
border-gray-800	borderColor: #2d3748
border-gray-900	borderColor: #1a202c
border-red-100	borderColor: #fff5f5
border-red-200	borderColor: #fed7d7
border-red-300	borderColor: #feb2b2
border-red-400	borderColor: #fc8181
border-red-500	borderColor: #f56565
border-red-600	borderColor: #e53e3e
border-red-700	borderColor: #c53030
border-red-800	borderColor: #9b2c2c
border-red-900	borderColor: #742a2a
border-orange-100	borderColor: #fffaf0
border-orange-200	borderColor: #feebc8
border-orange-300	borderColor: #fbd38d
border-orange-400	borderColor: #f6ad55
border-orange-500	borderColor: #ed8936
border-orange-600	borderColor: #dd6b20
border-orange-700	borderColor: #c05621
border-orange-800	borderColor: #9c4221
border-orange-900	borderColor: #7b341e
border-yellow-100	borderColor: #fffff0
border-yellow-200	borderColor: #fefcbf
border-yellow-300	borderColor: #faf089
border-yellow-400	borderColor: #f6e05e
border-yellow-500	borderColor: #ecc94b
border-yellow-600	borderColor: #d69e2e
border-yellow-700	borderColor: #b7791f
border-yellow-800	borderColor: #975a16
border-yellow-900	borderColor: #744210
border-green-100	borderColor: #f0fff4
border-green-200	borderColor: #c6f6d5
border-green-300	borderColor: #9ae6b4
border-green-400	borderColor: #68d391
border-green-500	borderColor: #48bb78
border-green-600	borderColor: #38a169
border-green-700	borderColor: #2f855a
border-green-800	borderColor: #276749
border-green-900	borderColor: #22543d
border-teal-100	borderColor: #e6fffa
border-teal-200	borderColor: #b2f5ea
border-teal-300	borderColor: #81e6d9
border-teal-400	borderColor: #4fd1c5
border-teal-500	borderColor: #38b2ac
border-teal-600	borderColor: #319795
border-teal-700	borderColor: #2c7a7b
border-teal-800	borderColor: #285e61
border-teal-900	borderColor: #234e52
border-blue-100	borderColor: #ebf8ff
border-blue-200	borderColor: #bee3f8
border-blue-300	borderColor: #90cdf4
border-blue-400	borderColor: #63b3ed
border-blue-500	borderColor: #4299e1
border-blue-600	borderColor: #3182ce
border-blue-700	borderColor: #2b6cb0
border-blue-800	borderColor: #2c5282
border-blue-900	borderColor: #2a4365
border-indigo-100	borderColor: #ebf4ff
border-indigo-200	borderColor: #c3dafe
border-indigo-300	borderColor: #a3bffa
border-indigo-400	borderColor: #7f9cf5
border-indigo-500	borderColor: #667eea
border-indigo-600	borderColor: #5a67d8
border-indigo-700	borderColor: #4c51bf
border-indigo-800	borderColor: #434190
border-indigo-900	borderColor: #3c366b
border-purple-100	borderColor: #faf5ff
border-purple-200	borderColor: #e9d8fd
border-purple-300	borderColor: #d6bcfa
border-purple-400	borderColor: #b794f4
border-purple-500	borderColor: #9f7aea
border-purple-600	borderColor: #805ad5
border-purple-700	borderColor: #6b46c1
border-purple-800	borderColor: #553c9a
border-purple-900	borderColor: #44337a
border-pink-100	borderColor: #fff5f7
border-pink-200	borderColor: #fed7e2
border-pink-300	borderColor: #fbb6ce
border-pink-400	borderColor: #f687b3
border-pink-500	borderColor: #ed64a6
border-pink-600	borderColor: #d53f8c
border-pink-700	borderColor: #b83280
border-pink-800	borderColor: #97266d
border-pink-900	borderColor: #702459

Border Radius

Border width value is based on the borderRadius config. You can override this property value to match your style. The class name follow this format: rounded.

For all side border radius class follow this format: rounded-[radius]

And for side spesific only follow this format: rounded-[t/r/b/l/tl/tr/br/bl]-[radius]

Class	Style
rounded-none	borderRadius: 0
rounded-sm	borderRadius: 2
rounded-default	borderRadius: 4
rounded-md	borderRadius: 6
rounded-lg	borderRadius: 8
rounded-full	borderRadius: 9999
rounded-t-none	borderTopLeftRadius: 0, borderTopRightRadius: 0
rounded-t-sm	borderTopLeftRadius: 2, borderTopRightRadius: 2
rounded-t-default	borderTopLeftRadius: 4, borderTopRightRadius: 4
rounded-t-md	borderTopLeftRadius: 6, borderTopRightRadius: 6
rounded-t-lg	borderTopLeftRadius: 8, borderTopRightRadius: 8
rounded-t-full	borderTopLeftRadius: 9999, borderTopRightRadius: 9999
rounded-r-none	borderTopRightRadius: 0, borderBottomRightRadius: 0
rounded-r-sm	borderTopRightRadius: 2, borderBottomRightRadius: 2
rounded-r-default	borderTopRightRadius: 4, borderBottomRightRadius: 4
rounded-r-md	borderTopRightRadius: 6, borderBottomRightRadius: 6
rounded-r-lg	borderTopRightRadius: 8, borderBottomRightRadius: 8
rounded-r-full	borderTopRightRadius: 9999, borderBottomRightRadius: 9999
rounded-b-none	borderBottomLeftRadius: 0, borderBottomRightRadius: 0
rounded-b-sm	borderBottomLeftRadius: 2, borderBottomRightRadius: 2
rounded-b-default	borderBottomLeftRadius: 4, borderBottomRightRadius: 4
rounded-b-md	borderBottomLeftRadius: 6, borderBottomRightRadius: 6
rounded-b-lg	borderBottomLeftRadius: 8, borderBottomRightRadius: 8
rounded-b-full	borderBottomLeftRadius: 9999, borderBottomRightRadius: 9999
rounded-l-none	borderTopLeftRadius: 0, borderBottomLeftRadius: 0
rounded-l-sm	borderTopLeftRadius: 2, borderBottomLeftRadius: 2
rounded-l-default	borderTopLeftRadius: 4, borderBottomLeftRadius: 4
rounded-l-md	borderTopLeftRadius: 6, borderBottomLeftRadius: 6
rounded-l-lg	borderTopLeftRadius: 8, borderBottomLeftRadius: 8
rounded-l-full	borderTopLeftRadius: 9999, borderBottomLeftRadius: 9999
rounded-tl-none	borderTopLeftRadius: 0
rounded-tl-sm	borderTopLeftRadius: 2
rounded-tl-default	borderTopLeftRadius: 4
rounded-tl-md	borderTopLeftRadius: 6
rounded-tl-lg	borderTopLeftRadius: 8
rounded-tl-full	borderTopLeftRadius: 9999
rounded-tr-none	borderTopRightRadius: 0
rounded-tr-sm	borderTopRightRadius: 2
rounded-tr-default	borderTopRightRadius: 4
rounded-tr-md	borderTopRightRadius: 6
rounded-tr-lg	borderTopRightRadius: 8
rounded-tr-full	borderTopRightRadius: 9999
rounded-br-none	borderBottomRightRadius: 0
rounded-br-sm	borderBottomRightRadius: 2
rounded-br-default	borderBottomRightRadius: 4
rounded-br-md	borderBottomRightRadius: 6
rounded-br-lg	borderBottomRightRadius: 8
rounded-br-full	borderBottomRightRadius: 9999
rounded-bl-none	borderBottomLeftRadius: 0
rounded-bl-sm	borderBottomLeftRadius: 2
rounded-bl-default	borderBottomLeftRadius: 4
rounded-bl-md	borderBottomLeftRadius: 6
rounded-bl-lg	borderBottomLeftRadius: 8
rounded-bl-full	borderBottomLeftRadius: 9999