Borders
Border Color
Utilities for sets border color.
Class
class | css | |
---|---|---|
border-transparent | border-color: transparent | |
border-current | border-color: currentColor | |
border-white | border-color: #fff | |
border-black-100 | border-color: #b9b9b9 | |
border-black-200 | border-color: #a2a2a2 | |
border-black-300 | border-color: #8b8b8b | |
border-black-400 | border-color: #737373 | |
border-black-500 | border-color: #5c5c5c | |
border-black-600 | border-color: #454545 | |
border-black-700 | border-color: #2e2e2e | |
border-black-800 | border-color: #171717 | |
border-black-900 | border-color: #000000 | |
border-charcoal-100 | border-color: #222c35 | |
border-charcoal-200 | border-color: #1f2831 | |
border-charcoal-300 | border-color: #1c252c | |
border-charcoal-400 | border-color: #192127 | |
border-charcoal-500 | border-color: #161d22 | |
border-charcoal-600 | border-color: #13181d | |
border-charcoal-700 | border-color: #101419 | |
border-charcoal-800 | border-color: #0d1014 | |
border-charcoal-900 | border-color: #0a0c0f | |
border-gray-100 | border-color: #f7fafc | |
border-gray-200 | border-color: #edf2f7 | |
border-gray-300 | border-color: #e2e8f0 | |
border-gray-400 | border-color: #cbd5e0 | |
border-gray-500 | border-color: #a0aec0 | |
border-gray-600 | border-color: #718096 | |
border-gray-700 | border-color: #4a5568 | |
border-gray-800 | border-color: #2d3748 | |
border-gray-900 | border-color: #1a202c | |
border-red-100 | border-color: #fff5f5 | |
border-red-200 | border-color: #fed7d7 | |
border-red-300 | border-color: #feb2b2 | |
border-red-400 | border-color: #fc8181 | |
border-red-500 | border-color: #f56565 | |
border-red-600 | border-color: #e53e3e | |
border-red-700 | border-color: #c53030 | |
border-red-800 | border-color: #9b2c2c | |
border-red-900 | border-color: #742a2a | |
border-orange-100 | border-color: #fffaf0 | |
border-orange-200 | border-color: #feebc8 | |
border-orange-300 | border-color: #fbd38d | |
border-orange-400 | border-color: #f6ad55 | |
border-orange-500 | border-color: #ed8936 | |
border-orange-600 | border-color: #dd6b20 | |
border-orange-700 | border-color: #c05621 | |
border-orange-800 | border-color: #9c4221 | |
border-orange-900 | border-color: #7b341e | |
border-green-100 | border-color: #f0fff4 | |
border-green-200 | border-color: #c6f6d5 | |
border-green-300 | border-color: #9ae6b4 | |
border-green-400 | border-color: #68d391 | |
border-green-500 | border-color: #48bb78 | |
border-green-600 | border-color: #38a169 | |
border-green-700 | border-color: #2f855a | |
border-green-800 | border-color: #276749 | |
border-green-900 | border-color: #22543d | |
border-teal-100 | border-color: #e6fffa | |
border-teal-200 | border-color: #b2f5ea | |
border-teal-300 | border-color: #81e6d9 | |
border-teal-400 | border-color: #4fd1c5 | |
border-teal-500 | border-color: #38b2ac | |
border-teal-600 | border-color: #319795 | |
border-teal-700 | border-color: #2c7a7b | |
border-teal-800 | border-color: #285e61 | |
border-teal-900 | border-color: #234e52 | |
border-blue-100 | border-color: #ebf8ff | |
border-blue-200 | border-color: #bee3f8 | |
border-blue-300 | border-color: #90cdf4 | |
border-blue-400 | border-color: #63b3ed | |
border-blue-500 | border-color: #4299e1 | |
border-blue-600 | border-color: #3182ce | |
border-blue-700 | border-color: #2b6cb0 | |
border-blue-800 | border-color: #2c5282 | |
border-blue-900 | border-color: #2a4365 | |
border-indigo-100 | border-color: #ebf4ff | |
border-indigo-200 | border-color: #c3dafe | |
border-indigo-300 | border-color: #a3bffa | |
border-indigo-400 | border-color: #7f9cf5 | |
border-indigo-500 | border-color: #667eea | |
border-indigo-600 | border-color: #5a67d8 | |
border-indigo-700 | border-color: #4c51bf | |
border-indigo-800 | border-color: #434190 | |
border-indigo-900 | border-color: #3c366b | |
border-purple-100 | border-color: #faf5ff | |
border-purple-200 | border-color: #e9d8fd | |
border-purple-300 | border-color: #d6bcfa | |
border-purple-400 | border-color: #b794f4 | |
border-purple-500 | border-color: #9f7aea | |
border-purple-600 | border-color: #805ad5 | |
border-purple-700 | border-color: #6b46c1 | |
border-purple-800 | border-color: #553c9a | |
border-purple-900 | border-color: #44337a | |
border-pink-100 | border-color: #fff5f7 | |
border-pink-200 | border-color: #fed7e2 | |
border-pink-300 | border-color: #fbb6ce | |
border-pink-400 | border-color: #f687b3 | |
border-pink-500 | border-color: #ed64a6 | |
border-pink-600 | border-color: #d53f8c | |
border-pink-700 | border-color: #b83280 | |
border-pink-800 | border-color: #97266d | |
border-pink-900 | border-color: #702459 | |
border-khaki-100 | border-color: #f9f7f4 | |
border-khaki-200 | border-color: #f0ebe4 | |
border-khaki-300 | border-color: #e7dfd3 | |
border-khaki-400 | border-color: #d5c8b2 | |
border-khaki-500 | border-color: #c3b091 | |
border-khaki-600 | border-color: #b09e83 | |
border-khaki-700 | border-color: #756a57 | |
border-khaki-800 | border-color: #584f41 | |
border-khaki-900 | border-color: #3b352c | |
border-amber-100 | border-color: #fff9e6 | |
border-amber-200 | border-color: #fff0bf | |
border-amber-300 | border-color: #ffe799 | |
border-amber-400 | border-color: #ffd54d | |
border-amber-500 | border-color: #ffc300 | |
border-amber-600 | border-color: #e6b000 | |
border-amber-700 | border-color: #997500 | |
border-amber-800 | border-color: #735800 | |
border-amber-900 | border-color: #4d3b00 | |
border-nero-100 | border-color: #e9e9e9 | |
border-nero-200 | border-color: #c7c8c9 | |
border-nero-300 | border-color: #a6a7a8 | |
border-nero-400 | border-color: #636466 | |
border-nero-500 | border-color: #202225 | |
border-nero-600 | border-color: #1d1f21 | |
border-nero-700 | border-color: #131416 | |
border-nero-800 | border-color: #0e0f11 | |
border-nero-900 | border-color: #0a0a0b |
Usage
<!-- Example -->
<y class="border-8 border-amber-400">
...
</y>
v1.1.0 Set auto dark theme enabled to an element with added (dark)
prefix.
<!-- Example -->
<y class="border-8 border-nero-100 ... (dark)border-8 (dark)border-gray-300">
...
</y>
Customize More
// @file: `src/_plugins.scss`
@include plugin(
(
utility: 'border-new-color',
//variant: 'responsive',
property: 'border-color',
modifier: (
'100': '#...',
'200': '#...'
...
)
)
)
Variant
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | Yes | |
hover | Yes | |
group-hover | ||
focus | Yes | |
focus-within | Yes | |
active | ||
visited | ||
checked | ||
disabled |