Divide Color
Utilities for controlling the border color between an element's child items.
Classes
| Class | Output |
|---|---|
| .d-divide-purple-100 | --dco: 100%; border-color: hsla(var(--purple-100-h) var(--purple-100-s) var(--purple-100-l) / var(--dco)) !important; |
| .d-divide-purple-200 | --dco: 100%; border-color: hsla(var(--purple-200-h) var(--purple-200-s) var(--purple-200-l) / var(--dco)) !important; |
| .d-divide-purple-300 | --dco: 100%; border-color: hsla(var(--purple-300-h) var(--purple-300-s) var(--purple-300-l) / var(--dco)) !important; |
| .d-divide-purple-400 | --dco: 100%; border-color: hsla(var(--purple-400-h) var(--purple-400-s) var(--purple-400-l) / var(--dco)) !important; |
| .d-divide-purple-500 | --dco: 100%; border-color: hsla(var(--purple-500-h) var(--purple-500-s) var(--purple-500-l) / var(--dco)) !important; |
| .d-divide-purple-600 | --dco: 100%; border-color: hsla(var(--purple-600-h) var(--purple-600-s) var(--purple-600-l) / var(--dco)) !important; |
| .d-divide-purple-700 | --dco: 100%; border-color: hsla(var(--purple-700-h) var(--purple-700-s) var(--purple-700-l) / var(--dco)) !important; |
| .d-divide-purple-800 | --dco: 100%; border-color: hsla(var(--purple-800-h) var(--purple-800-s) var(--purple-800-l) / var(--dco)) !important; |
| .d-divide-black-025 | --dco: 100%; border-color: hsla(var(--black-025-h) var(--black-025-s) var(--black-025-l) / var(--dco)) !important; |
| .d-divide-black-050 | --dco: 100%; border-color: hsla(var(--black-050-h) var(--black-050-s) var(--black-050-l) / var(--dco)) !important; |
| .d-divide-black-075 | --dco: 100%; border-color: hsla(var(--black-075-h) var(--black-075-s) var(--black-075-l) / var(--dco)) !important; |
| .d-divide-black-100 | --dco: 100%; border-color: hsla(var(--black-100-h) var(--black-100-s) var(--black-100-l) / var(--dco)) !important; |
| .d-divide-black-200 | --dco: 100%; border-color: hsla(var(--black-200-h) var(--black-200-s) var(--black-200-l) / var(--dco)) !important; |
| .d-divide-black-300 | --dco: 100%; border-color: hsla(var(--black-300-h) var(--black-300-s) var(--black-300-l) / var(--dco)) !important; |
| .d-divide-black-400 | --dco: 100%; border-color: hsla(var(--black-400-h) var(--black-400-s) var(--black-400-l) / var(--dco)) !important; |
| .d-divide-black-500 | --dco: 100%; border-color: hsla(var(--black-500-h) var(--black-500-s) var(--black-500-l) / var(--dco)) !important; |
| .d-divide-black-600 | --dco: 100%; border-color: hsla(var(--black-600-h) var(--black-600-s) var(--black-600-l) / var(--dco)) !important; |
| .d-divide-black-700 | --dco: 100%; border-color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) / var(--dco)) !important; |
| .d-divide-black-800 | --dco: 100%; border-color: hsla(var(--black-800-h) var(--black-800-s) var(--black-800-l) / var(--dco)) !important; |
| .d-divide-black-900 | --dco: 100%; border-color: hsla(var(--black-900-h) var(--black-900-s) var(--black-900-l) / var(--dco)) !important; |
| .d-divide-orange-100 | --dco: 100%; border-color: hsla(var(--orange-100-h) var(--orange-100-s) var(--orange-100-l) / var(--dco)) !important; |
| .d-divide-orange-200 | --dco: 100%; border-color: hsla(var(--orange-200-h) var(--orange-200-s) var(--orange-200-l) / var(--dco)) !important; |
| .d-divide-orange-300 | --dco: 100%; border-color: hsla(var(--orange-300-h) var(--orange-300-s) var(--orange-300-l) / var(--dco)) !important; |
| .d-divide-orange-400 | --dco: 100%; border-color: hsla(var(--orange-400-h) var(--orange-400-s) var(--orange-400-l) / var(--dco)) !important; |
| .d-divide-orange-500 | --dco: 100%; border-color: hsla(var(--orange-500-h) var(--orange-500-s) var(--orange-500-l) / var(--dco)) !important; |
| .d-divide-orange-600 | --dco: 100%; border-color: hsla(var(--orange-600-h) var(--orange-600-s) var(--orange-600-l) / var(--dco)) !important; |
| .d-divide-pink-100 | --dco: 100%; border-color: hsla(var(--pink-100-h) var(--pink-100-s) var(--pink-100-l) / var(--dco)) !important; |
| .d-divide-pink-200 | --dco: 100%; border-color: hsla(var(--pink-200-h) var(--pink-200-s) var(--pink-200-l) / var(--dco)) !important; |
| .d-divide-pink-300 | --dco: 100%; border-color: hsla(var(--pink-300-h) var(--pink-300-s) var(--pink-300-l) / var(--dco)) !important; |
| .d-divide-pink-400 | --dco: 100%; border-color: hsla(var(--pink-400-h) var(--pink-400-s) var(--pink-400-l) / var(--dco)) !important; |
| .d-divide-pink-500 | --dco: 100%; border-color: hsla(var(--pink-500-h) var(--pink-500-s) var(--pink-500-l) / var(--dco)) !important; |
| .d-divide-pink-600 | --dco: 100%; border-color: hsla(var(--pink-600-h) var(--pink-600-s) var(--pink-600-l) / var(--dco)) !important; |
| .d-divide-pink-700 | --dco: 100%; border-color: hsla(var(--pink-700-h) var(--pink-700-s) var(--pink-700-l) / var(--dco)) !important; |
| .d-divide-yellow-050 | --dco: 100%; border-color: hsla(var(--yellow-050-h) var(--yellow-050-s) var(--yellow-050-l) / var(--dco)) !important; |
| .d-divide-yellow-100 | --dco: 100%; border-color: hsla(var(--yellow-100-h) var(--yellow-100-s) var(--yellow-100-l) / var(--dco)) !important; |
| .d-divide-yellow-200 | --dco: 100%; border-color: hsla(var(--yellow-200-h) var(--yellow-200-s) var(--yellow-200-l) / var(--dco)) !important; |
| .d-divide-yellow-300 | --dco: 100%; border-color: hsla(var(--yellow-300-h) var(--yellow-300-s) var(--yellow-300-l) / var(--dco)) !important; |
| .d-divide-yellow-400 | --dco: 100%; border-color: hsla(var(--yellow-400-h) var(--yellow-400-s) var(--yellow-400-l) / var(--dco)) !important; |
| .d-divide-yellow-500 | --dco: 100%; border-color: hsla(var(--yellow-500-h) var(--yellow-500-s) var(--yellow-500-l) / var(--dco)) !important; |
| .d-divide-yellow-600 | --dco: 100%; border-color: hsla(var(--yellow-600-h) var(--yellow-600-s) var(--yellow-600-l) / var(--dco)) !important; |
| .d-divide-red-100 | --dco: 100%; border-color: hsla(var(--red-100-h) var(--red-100-s) var(--red-100-l) / var(--dco)) !important; |
| .d-divide-red-200 | --dco: 100%; border-color: hsla(var(--red-200-h) var(--red-200-s) var(--red-200-l) / var(--dco)) !important; |
| .d-divide-red-300 | --dco: 100%; border-color: hsla(var(--red-300-h) var(--red-300-s) var(--red-300-l) / var(--dco)) !important; |
| .d-divide-red-400 | --dco: 100%; border-color: hsla(var(--red-400-h) var(--red-400-s) var(--red-400-l) / var(--dco)) !important; |
| .d-divide-red-500 | --dco: 100%; border-color: hsla(var(--red-500-h) var(--red-500-s) var(--red-500-l) / var(--dco)) !important; |
| .d-divide-red-600 | --dco: 100%; border-color: hsla(var(--red-600-h) var(--red-600-s) var(--red-600-l) / var(--dco)) !important; |
| .d-divide-red-700 | --dco: 100%; border-color: hsla(var(--red-700-h) var(--red-700-s) var(--red-700-l) / var(--dco)) !important; |
| .d-divide-green-100 | --dco: 100%; border-color: hsla(var(--green-100-h) var(--green-100-s) var(--green-100-l) / var(--dco)) !important; |
| .d-divide-green-200 | --dco: 100%; border-color: hsla(var(--green-200-h) var(--green-200-s) var(--green-200-l) / var(--dco)) !important; |
| .d-divide-green-300 | --dco: 100%; border-color: hsla(var(--green-300-h) var(--green-300-s) var(--green-300-l) / var(--dco)) !important; |
| .d-divide-green-400 | --dco: 100%; border-color: hsla(var(--green-400-h) var(--green-400-s) var(--green-400-l) / var(--dco)) !important; |
| .d-divide-green-500 | --dco: 100%; border-color: hsla(var(--green-500-h) var(--green-500-s) var(--green-500-l) / var(--dco)) !important; |
| .d-divide-green-600 | --dco: 100%; border-color: hsla(var(--green-600-h) var(--green-600-s) var(--green-600-l) / var(--dco)) !important; |
| .d-divide-green-700 | --dco: 100%; border-color: hsla(var(--green-700-h) var(--green-700-s) var(--green-700-l) / var(--dco)) !important; |
Vertical Dividers
Use d-divide-y{n} to create a divider between an element's child items.
<div class="d-divide-y d-divide-purple-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Horizontal Dividers
Use d-divide-x{n} to create a divider between an element's child items.
<div class="d-divide-x d-divide-purple-400">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Changing opacities
Use d-dco{n} to change a divider opacity value.
<div class="d-divide-y1 d-divide-pink-400 d-dco75">
<div>1</div>
<div>2</div>
<div>3</div>
</div>