Border
Utility classes to add borders to UI elements.
Border Sides
Border utility classes can be used to set border on specific or all sides of an element.
| Sides | Class |
|---|---|
| .ds-bd | |
| .ds-bd-top | |
| .ds-bd-bottom | |
| .ds-bd-left | |
| .ds-bd-right |
Border Colors
Color tokens are used to create border color modifiers for the utility.
| Color | Class | Hex |
|---|---|---|
| .ds-color-base-white | #ffffff | |
| .ds-color-base-black | #000000 | |
| .ds-color-theme-blue-0 | #e5f5fb | |
| .ds-color-theme-blue-1 | #ccecf8 | |
| .ds-color-theme-blue-2 | #99d9f1 | |
| .ds-color-theme-blue-3 | #66c6ea | |
| .ds-color-theme-blue-4 | #4cbce7 | |
| .ds-color-theme-blue-5 | #19a9e0 | |
| .ds-color-theme-blue-6 | #00a0dd | |
| .ds-color-theme-blue-7 | #0090c6 | |
| .ds-color-theme-blue-8 | #0080b0 | |
| .ds-color-theme-blue-9 | #00709a | |
| .ds-color-theme-indigo-0 | #edf2ff | |
| .ds-color-theme-indigo-1 | #dbe4ff | |
| .ds-color-theme-indigo-2 | #bac8ff | |
| .ds-color-theme-indigo-3 | #91a7ff | |
| .ds-color-theme-indigo-4 | #748ffc | |
| .ds-color-theme-indigo-5 | #5c7cfa | |
| .ds-color-theme-indigo-6 | #4c6ef5 | |
| .ds-color-theme-indigo-7 | #4263eb | |
| .ds-color-theme-indigo-8 | #3b5bdb | |
| .ds-color-theme-indigo-9 | #364fc7 | |
| .ds-color-theme-green-0 | #ebfbee | |
| .ds-color-theme-green-1 | #d3f9d8 | |
| .ds-color-theme-green-2 | #b2f2bb | |
| .ds-color-theme-green-3 | #8ce99a | |
| .ds-color-theme-green-4 | #69db7c | |
| .ds-color-theme-green-5 | #51cf66 | |
| .ds-color-theme-green-6 | #40c057 | |
| .ds-color-theme-green-7 | #37b24d | |
| .ds-color-theme-green-8 | #2f9e44 | |
| .ds-color-theme-green-9 | #2b8a3e | |
| .ds-color-theme-yellow-0 | #fff9db | |
| .ds-color-theme-yellow-1 | #fff3bf | |
| .ds-color-theme-yellow-2 | #ffec99 | |
| .ds-color-theme-yellow-3 | #ffe066 | |
| .ds-color-theme-yellow-4 | #ffd43b | |
| .ds-color-theme-yellow-5 | #fcc419 | |
| .ds-color-theme-yellow-6 | #fab005 | |
| .ds-color-theme-yellow-7 | #f59f00 | |
| .ds-color-theme-yellow-8 | #f08c00 | |
| .ds-color-theme-yellow-9 | #e67700 | |
| .ds-color-theme-red-0 | #fff5f5 | |
| .ds-color-theme-red-1 | #ffe3e3 | |
| .ds-color-theme-red-2 | #ffc9c9 | |
| .ds-color-theme-red-3 | #ffa8a8 | |
| .ds-color-theme-red-4 | #ff8787 | |
| .ds-color-theme-red-5 | #ff6b6b | |
| .ds-color-theme-red-6 | #fa5252 | |
| .ds-color-theme-red-7 | #f03e3e | |
| .ds-color-theme-red-8 | #e03131 | |
| .ds-color-theme-red-9 | #c92a2a | |
| .ds-color-theme-gray-0 | #f8f9fa | |
| .ds-color-theme-gray-1 | #f1f3f5 | |
| .ds-color-theme-gray-2 | #e9ecef | |
| .ds-color-theme-gray-3 | #dee2e6 | |
| .ds-color-theme-gray-4 | #ced4da | |
| .ds-color-theme-gray-5 | #adb5bd | |
| .ds-color-theme-gray-6 | #868e96 | |
| .ds-color-theme-gray-7 | #495057 | |
| .ds-color-theme-gray-8 | #343a40 | |
| .ds-color-theme-gray-9 | #212529 |