Borders

Dissect Color v1.0.8

Utilities for sets bottom border color on each child elements of its parent.


Class

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

Usage

Set dissect-x-{value} and dissect-y-{value} borders with colors.

123
<!-- Example -->
<y class="dissect-y-4 dissect-amber-400">
<y>1</y>
<y>2</y>
<y>3</y>
</y>

Variant

VariantEnabledResponsive
DefaultYes
Dark Theme
hover
group-hover
focus
focus-visible
focus-within
active
visited
checked
disabled