Borders
Dissect Color v1.0.8
Utilities for sets bottom border color on each child elements of its parent.
Class
| class | css | |
|---|---|---|
| dissect-transparent | border-color: transparent | |
| dissect-current | border-color: currentColor | |
| dissect-amber-100 | --dissect-opacity: 1; border-color: #fff9e6; border-color: rgba(255, 249, 230, var(--dissect-opacity)) | |
| dissect-amber-200 | --dissect-opacity: 1; border-color: #fff0bf; border-color: rgba(255, 240, 191, var(--dissect-opacity)) | |
| dissect-amber-300 | --dissect-opacity: 1; border-color: #ffe799; border-color: rgba(255, 231, 153, var(--dissect-opacity)) | |
| dissect-amber-400 | --dissect-opacity: 1; border-color: #ffd54d; border-color: rgba(255, 213, 77, var(--dissect-opacity)) | |
| dissect-amber-500 | --dissect-opacity: 1; border-color: #ffc300; border-color: rgba(255, 195, 0, var(--dissect-opacity)) | |
| dissect-amber-600 | --dissect-opacity: 1; border-color: #e6b000; border-color: rgba(230, 176, 0, var(--dissect-opacity)) | |
| dissect-amber-700 | --dissect-opacity: 1; border-color: #997500; border-color: rgba(153, 117, 0, var(--dissect-opacity)) | |
| dissect-amber-800 | --dissect-opacity: 1; border-color: #735800; border-color: rgba(115, 88, 0, var(--dissect-opacity)) | |
| dissect-amber-900 | --dissect-opacity: 1; border-color: #4d3b00; border-color: rgba(77, 59, 0, var(--dissect-opacity)) | |
| dissect-black-100 | --dissect-opacity: 1; border-color: #b9b9b9; border-color: rgba(185, 185, 185, var(--dissect-opacity)) | |
| dissect-black-200 | --dissect-opacity: 1; border-color: #a2a2a2; border-color: rgba(162, 162, 162, var(--dissect-opacity)) | |
| dissect-black-300 | --dissect-opacity: 1; border-color: #8b8b8b; border-color: rgba(139, 139, 139, var(--dissect-opacity)) | |
| dissect-black-400 | --dissect-opacity: 1; border-color: #737373; border-color: rgba(115, 115, 115, var(--dissect-opacity)) | |
| dissect-black-500 | --dissect-opacity: 1; border-color: #5c5c5c; border-color: rgba(92, 92, 92, var(--dissect-opacity)) | |
| dissect-black-600 | --dissect-opacity: 1; border-color: #454545; border-color: rgba(69, 69, 69, var(--dissect-opacity)) | |
| dissect-black-700 | --dissect-opacity: 1; border-color: #2e2e2e; border-color: rgba(46, 46, 46, var(--dissect-opacity)) | |
| dissect-black-800 | --dissect-opacity: 1; border-color: #171717; border-color: rgba(23, 23, 23, var(--dissect-opacity)) | |
| dissect-black-900 | --dissect-opacity: 1; border-color: #000000; border-color: rgba(0, 0, 0, var(--dissect-opacity)) | |
| dissect-blue-100 | --dissect-opacity: 1; border-color: #ebf8ff; border-color: rgba(235, 248, 255, var(--dissect-opacity)) | |
| dissect-blue-200 | --dissect-opacity: 1; border-color: #bee3f8; border-color: rgba(190, 227, 248, var(--dissect-opacity)) | |
| dissect-blue-300 | --dissect-opacity: 1; border-color: #90cdf4; border-color: rgba(144, 205, 244, var(--dissect-opacity)) | |
| dissect-blue-400 | --dissect-opacity: 1; border-color: #63b3ed; border-color: rgba(99, 179, 237, var(--dissect-opacity)) | |
| dissect-blue-500 | --dissect-opacity: 1; border-color: #4299e1; border-color: rgba(66, 153, 225, var(--dissect-opacity)) | |
| dissect-blue-600 | --dissect-opacity: 1; border-color: #3182ce; border-color: rgba(49, 130, 206, var(--dissect-opacity)) | |
| dissect-blue-700 | --dissect-opacity: 1; border-color: #2b6cb0; border-color: rgba(43, 108, 176, var(--dissect-opacity)) | |
| dissect-blue-800 | --dissect-opacity: 1; border-color: #2c5282; border-color: rgba(44, 82, 130, var(--dissect-opacity)) | |
| dissect-blue-900 | --dissect-opacity: 1; border-color: #2a4365; border-color: rgba(42, 67, 101, var(--dissect-opacity)) | |
| dissect-charcoal-100 | --dissect-opacity: 1; border-color: #222c35; border-color: rgba(34, 44, 53, var(--dissect-opacity)) | |
| dissect-charcoal-200 | --dissect-opacity: 1; border-color: #1f2831; border-color: rgba(31, 40, 49, var(--dissect-opacity)) | |
| dissect-charcoal-300 | --dissect-opacity: 1; border-color: #1c252c; border-color: rgba(28, 37, 44, var(--dissect-opacity)) | |
| dissect-charcoal-400 | --dissect-opacity: 1; border-color: #192127; border-color: rgba(25, 33, 39, var(--dissect-opacity)) | |
| dissect-charcoal-500 | --dissect-opacity: 1; border-color: #161d22; border-color: rgba(22, 29, 34, var(--dissect-opacity)) | |
| dissect-charcoal-600 | --dissect-opacity: 1; border-color: #13181d; border-color: rgba(19, 24, 29, var(--dissect-opacity)) | |
| dissect-charcoal-700 | --dissect-opacity: 1; border-color: #101419; border-color: rgba(16, 20, 25, var(--dissect-opacity)) | |
| dissect-charcoal-800 | --dissect-opacity: 1; border-color: #0d1014; border-color: rgba(13, 16, 20, var(--dissect-opacity)) | |
| dissect-charcoal-900 | --dissect-opacity: 1; border-color: #0a0c0f; border-color: rgba(10, 12, 15, var(--dissect-opacity)) | |
| dissect-gray-100 | --dissect-opacity: 1; border-color: #f7fafc; border-color: rgba(247, 250, 252, var(--dissect-opacity)) | |
| dissect-gray-200 | --dissect-opacity: 1; border-color: #edf2f7; border-color: rgba(237, 242, 247, var(--dissect-opacity)) | |
| dissect-gray-300 | --dissect-opacity: 1; border-color: #e2e8f0; border-color: rgba(226, 232, 240, var(--dissect-opacity)) | |
| dissect-gray-400 | --dissect-opacity: 1; border-color: #cbd5e0; border-color: rgba(203, 213, 224, var(--dissect-opacity)) | |
| dissect-gray-500 | --dissect-opacity: 1; border-color: #a0aec0; border-color: rgba(160, 174, 192, var(--dissect-opacity)) | |
| dissect-gray-600 | --dissect-opacity: 1; border-color: #718096; border-color: rgba(113, 128, 150, var(--dissect-opacity)) | |
| dissect-gray-700 | --dissect-opacity: 1; border-color: #4a5568; border-color: rgba(74, 85, 104, var(--dissect-opacity)) | |
| dissect-gray-800 | --dissect-opacity: 1; border-color: #2d3748; border-color: rgba(45, 55, 72, var(--dissect-opacity)) | |
| dissect-gray-900 | --dissect-opacity: 1; border-color: #1a202c; border-color: rgba(26, 32, 44, var(--dissect-opacity)) | |
| dissect-green-100 | --dissect-opacity: 1; border-color: #f7fafc; border-color: rgba(240, 255, 244, var(--dissect-opacity)) | |
| dissect-green-200 | --dissect-opacity: 1; border-color: #edf2f7; border-color: rgba(198, 246, 213, var(--dissect-opacity)) | |
| dissect-green-300 | --dissect-opacity: 1; border-color: #e2e8f0; border-color: rgba(154, 230, 180, var(--dissect-opacity)) | |
| dissect-green-400 | --dissect-opacity: 1; border-color: #cbd5e0; border-color: rgba(104, 211, 145, var(--dissect-opacity)) | |
| dissect-green-500 | --dissect-opacity: 1; border-color: #a0aec0; border-color: rgba(72, 187, 120, var(--dissect-opacity)) | |
| dissect-green-600 | --dissect-opacity: 1; border-color: #718096; border-color: rgba(56, 161, 105, var(--dissect-opacity)) | |
| dissect-green-700 | --dissect-opacity: 1; border-color: #4a5568; border-color: rgba(47, 133, 90, var(--dissect-opacity)) | |
| dissect-green-800 | --dissect-opacity: 1; border-color: #2d3748; border-color: rgba(39, 103, 73, var(--dissect-opacity)) | |
| dissect-green-900 | --dissect-opacity: 1; border-color: #1a202c; border-color: rgba(34, 84, 61, var(--dissect-opacity)) | |
| dissect-indigo-100 | --dissect-opacity: 1; border-color: #ebf4ff; border-color: rgba(235, 244, 255, var(--dissect-opacity)) | |
| dissect-indigo-200 | --dissect-opacity: 1; border-color: #c3dafe; border-color: rgba(195, 218, 254, var(--dissect-opacity)) | |
| dissect-indigo-300 | --dissect-opacity: 1; border-color: #a3bffa; border-color: rgba(163, 191, 250, var(--dissect-opacity)) | |
| dissect-indigo-400 | --dissect-opacity: 1; border-color: #7f9cf5; border-color: rgba(127, 156, 245, var(--dissect-opacity)) | |
| dissect-indigo-500 | --dissect-opacity: 1; border-color: #667eea; border-color: rgba(102, 126, 234, var(--dissect-opacity)) | |
| dissect-indigo-600 | --dissect-opacity: 1; border-color: #5a67d8; border-color: rgba(90, 103, 216, var(--dissect-opacity)) | |
| dissect-indigo-700 | --dissect-opacity: 1; border-color: #4c51bf; border-color: rgba(76, 81, 191, var(--dissect-opacity)) | |
| dissect-indigo-800 | --dissect-opacity: 1; border-color: #434190; border-color: rgba(67, 65, 144, var(--dissect-opacity)) | |
| dissect-indigo-900 | --dissect-opacity: 1; border-color: #3c366b; border-color: rgba(60, 54, 107, var(--dissect-opacity)) | |
| dissect-khaki-100 | --dissect-opacity: 1; border-color: #f9f7f4; border-color: rgba(249, 247, 244, var(--dissect-opacity)) | |
| dissect-khaki-200 | --dissect-opacity: 1; border-color: #f0ebe4; border-color: rgba(240, 235, 228, var(--dissect-opacity)) | |
| dissect-khaki-300 | --dissect-opacity: 1; border-color: #e7dfd3; border-color: rgba(231, 223, 211, var(--dissect-opacity)) | |
| dissect-khaki-400 | --dissect-opacity: 1; border-color: #d5c8b2; border-color: rgba(213, 200, 178, var(--dissect-opacity)) | |
| dissect-khaki-500 | --dissect-opacity: 1; border-color: #c3b091; border-color: rgba(195, 176, 145, var(--dissect-opacity)) | |
| dissect-khaki-600 | --dissect-opacity: 1; border-color: #b09e83; border-color: rgba(176, 158, 131, var(--dissect-opacity)) | |
| dissect-khaki-700 | --dissect-opacity: 1; border-color: #756a57; border-color: rgba(117, 106, 87, var(--dissect-opacity)) | |
| dissect-khaki-800 | --dissect-opacity: 1; border-color: #584f41; border-color: rgba(88, 79, 65, var(--dissect-opacity)) | |
| dissect-khaki-900 | --dissect-opacity: 1; border-color: #3b352c; border-color: rgba(59, 53, 44, var(--dissect-opacity)) | |
| dissect-nero-100 | --dissect-opacity: 1; border-color: #e9e9e9; border-color: rgba(233, 233, 233, var(--dissect-opacity)) | |
| dissect-nero-200 | --dissect-opacity: 1; border-color: #c7c8c9; border-color: rgba(199, 200, 201, var(--dissect-opacity)) | |
| dissect-nero-300 | --dissect-opacity: 1; border-color: #a6a7a8; border-color: rgba(166, 167, 168, var(--dissect-opacity)) | |
| dissect-nero-400 | --dissect-opacity: 1; border-color: #636466; border-color: rgba(99, 100, 102, var(--dissect-opacity)) | |
| dissect-nero-500 | --dissect-opacity: 1; border-color: #202225; border-color: rgba(32, 34, 37, var(--dissect-opacity)) | |
| dissect-nero-600 | --dissect-opacity: 1; border-color: #1d1f21; border-color: rgba(29, 31, 33, var(--dissect-opacity)) | |
| dissect-nero-700 | --dissect-opacity: 1; border-color: #131416; border-color: rgba(19, 20, 22, var(--dissect-opacity)) | |
| dissect-nero-800 | --dissect-opacity: 1; border-color: #0e0f11; border-color: rgba(14, 15, 17, var(--dissect-opacity)) | |
| dissect-nero-900 | --dissect-opacity: 1; border-color: #0a0a0b; border-color: rgba(10, 10, 11, var(--dissect-opacity)) | |
| dissect-orange-100 | --dissect-opacity: 1; border-color: #fffaf0; border-color: rgba(255, 250, 240, var(--dissect-opacity)) | |
| dissect-orange-200 | --dissect-opacity: 1; border-color: #feebc8; border-color: rgba(254, 235, 200, var(--dissect-opacity)) | |
| dissect-orange-300 | --dissect-opacity: 1; border-color: #fbd38d; border-color: rgba(251, 211, 141, var(--dissect-opacity)) | |
| dissect-orange-400 | --dissect-opacity: 1; border-color: #f6ad55; border-color: rgba(246, 173, 85, var(--dissect-opacity)) | |
| dissect-orange-500 | --dissect-opacity: 1; border-color: #ed8936; border-color: rgba(237, 137, 54, var(--dissect-opacity)) | |
| dissect-orange-600 | --dissect-opacity: 1; border-color: #dd6b20; border-color: rgba(221, 107, 32, var(--dissect-opacity)) | |
| dissect-orange-700 | --dissect-opacity: 1; border-color: #c05621; border-color: rgba(192, 86, 33, var(--dissect-opacity)) | |
| dissect-orange-800 | --dissect-opacity: 1; border-color: #9c4221; border-color: rgba(156, 66, 33, var(--dissect-opacity)) | |
| dissect-orange-900 | --dissect-opacity: 1; border-color: #7b341e; border-color: rgba(123, 52, 30, var(--dissect-opacity)) | |
| dissect-pink-100 | --dissect-opacity: 1; border-color: #fff5f7; border-color: rgba(255, 245, 247, var(--dissect-opacity)) | |
| dissect-pink-200 | --dissect-opacity: 1; border-color: #fed7e2; border-color: rgba(254, 215, 226, var(--dissect-opacity)) | |
| dissect-pink-300 | --dissect-opacity: 1; border-color: #fbb6ce; border-color: rgba(251, 182, 206, var(--dissect-opacity)) | |
| dissect-pink-400 | --dissect-opacity: 1; border-color: #f687b3; border-color: rgba(246, 135, 179, var(--dissect-opacity)) | |
| dissect-pink-500 | --dissect-opacity: 1; border-color: #ed64a6; border-color: rgba(237, 100, 166, var(--dissect-opacity)) | |
| dissect-pink-600 | --dissect-opacity: 1; border-color: #d53f8c; border-color: rgba(213, 63, 140, var(--dissect-opacity)) | |
| dissect-pink-700 | --dissect-opacity: 1; border-color: #b83280; border-color: rgba(184, 50, 128, var(--dissect-opacity)) | |
| dissect-pink-800 | --dissect-opacity: 1; border-color: #97266d; border-color: rgba(151, 38, 109, var(--dissect-opacity)) | |
| dissect-pink-900 | --dissect-opacity: 1; border-color: #702459; border-color: rgba(112, 36, 89, var(--dissect-opacity)) | |
| dissect-purple-100 | --dissect-opacity: 1; border-color: #faf5ff; border-color: rgba(250, 245, 255, var(--dissect-opacity)) | |
| dissect-purple-200 | --dissect-opacity: 1; border-color: #e9d8fd; border-color: rgba(233, 216, 253, var(--dissect-opacity)) | |
| dissect-purple-300 | --dissect-opacity: 1; border-color: #d6bcfa; border-color: rgba(214, 188, 250, var(--dissect-opacity)) | |
| dissect-purple-400 | --dissect-opacity: 1; border-color: #b794f4; border-color: rgba(183, 148, 244, var(--dissect-opacity)) | |
| dissect-purple-500 | --dissect-opacity: 1; border-color: #9f7aea; border-color: rgba(159, 122, 234, var(--dissect-opacity)) | |
| dissect-purple-600 | --dissect-opacity: 1; border-color: #805ad5; border-color: rgba(128, 90, 213, var(--dissect-opacity)) | |
| dissect-purple-700 | --dissect-opacity: 1; border-color: #6b46c1; border-color: rgba(107, 70, 193, var(--dissect-opacity)) | |
| dissect-purple-800 | --dissect-opacity: 1; border-color: #553c9a; border-color: rgba(85, 60, 154, var(--dissect-opacity)) | |
| dissect-purple-900 | --dissect-opacity: 1; border-color: #44337a; border-color: rgba(68, 51, 122, var(--dissect-opacity)) | |
| dissect-red-100 | --dissect-opacity: 1; border-color: #fff5f5; border-color: rgba(255, 245, 245, var(--dissect-opacity)) | |
| dissect-red-200 | --dissect-opacity: 1; border-color: #fed7d7; border-color: rgba(254, 215, 215, var(--dissect-opacity)) | |
| dissect-red-300 | --dissect-opacity: 1; border-color: #feb2b2; border-color: rgba(254, 178, 178, var(--dissect-opacity)) | |
| dissect-red-400 | --dissect-opacity: 1; border-color: #fc8181; border-color: rgba(252, 129, 129, var(--dissect-opacity)) | |
| dissect-red-500 | --dissect-opacity: 1; border-color: #f56565; border-color: rgba(245, 101, 101, var(--dissect-opacity)) | |
| dissect-red-600 | --dissect-opacity: 1; border-color: #805ad5; border-color: rgba(229, 62, 62, var(--dissect-opacity)) | |
| dissect-red-700 | --dissect-opacity: 1; border-color: #c53030; border-color: rgba(197, 48, 48, var(--dissect-opacity)) | |
| dissect-red-800 | --dissect-opacity: 1; border-color: #9b2c2c; border-color: rgba(155, 44, 44, var(--dissect-opacity)) | |
| dissect-red-900 | --dissect-opacity: 1; border-color: #742a2a; border-color: rgba(116, 42, 42, var(--dissect-opacity)) | |
| dissect-teal-100 | --dissect-opacity: 1; border-color: #e6fffa; border-color: rgba(230, 255, 250, var(--dissect-opacity)) | |
| dissect-teal-200 | --dissect-opacity: 1; border-color: #b2f5ea; border-color: rgba(178, 245, 234, var(--dissect-opacity)) | |
| dissect-teal-300 | --dissect-opacity: 1; border-color: #81e6d9; border-color: rgba(129, 230, 217, var(--dissect-opacity)) | |
| dissect-teal-400 | --dissect-opacity: 1; border-color: #4fd1c5; border-color: rgba(79, 209, 197, var(--dissect-opacity)) | |
| dissect-teal-500 | --dissect-opacity: 1; border-color: #38b2ac; border-color: rgba(56, 178, 172, var(--dissect-opacity)) | |
| dissect-teal-600 | --dissect-opacity: 1; border-color: #319795; border-color: rgba(49, 151, 149, var(--dissect-opacity)) | |
| dissect-teal-700 | --dissect-opacity: 1; border-color: #2c7a7b; border-color: rgba(44, 122, 123, var(--dissect-opacity)) | |
| dissect-teal-800 | --dissect-opacity: 1; border-color: #285e61; border-color: rgba(40, 94, 97, var(--dissect-opacity)) | |
| dissect-teal-900 | --dissect-opacity: 1; border-color: #234e52; border-color: rgba(35, 78, 82, var(--dissect-opacity)) |
Usage
Set dissect-x-{value} and dissect-y-{value} borders with colors.
<!-- Example -->
<y class="dissect-y-4 dissect-amber-400">
<y>1</y>
<y>2</y>
<y>3</y>
</y>Variant
| Variant | Enabled | Responsive |
|---|---|---|
| Default | Yes | |
| Dark Theme | ||
| hover | ||
| group-hover | ||
| focus | ||
| focus-within | ||
| active | ||
| visited | ||
| checked | ||
| disabled |
