Border Color
Utilities for controlling the color of an element's borders.
| Class | Properties | Value |
|---|---|---|
ob-border-inherit | border-color: inherit | |
ob-border-current | border-color: currentColor | |
ob-border-transparent | border-color: transparent | |
ob-border-white | border-color: var(--ob-white) | |
ob-border-black | border-color: var(--ob-black) | |
ob-border-body-light | border-color: var(--ob-body-light) | |
ob-border-body-dark | border-color: var(--ob-body-dark) | |
ob-border-white-emph-high | border-color: var(--ob-white-emph-high) | |
ob-border-white-emph-medium | border-color: var(--ob-white-emph-medium) | |
ob-border-white-emph-low | border-color: var(--ob-white-emph-low) | |
ob-border-black-emph-high | border-color: var(--ob-black-emph-high) | |
ob-border-black-emph-medium | border-color: var(--ob-black-emph-medium) | |
ob-border-black-emph-low | border-color: var(--ob-black-emph-low) | |
ob-border-primary-50 | border-color: var(--ob-primary-50) | |
ob-border-primary-100 | border-color: var(--ob-primary-100) | |
ob-border-primary-200 | border-color: var(--ob-primary-200) | |
ob-border-primary-300 | border-color: var(--ob-primary-300) | |
ob-border-primary-400 | border-color: var(--ob-primary-400) | |
ob-border-primary-500 | border-color: var(--ob-primary-500) | |
ob-border-primary-600 | border-color: var(--ob-primary-600) | |
ob-border-primary-700 | border-color: var(--ob-primary-700) | |
ob-border-primary-800 | border-color: var(--ob-primary-800) | |
ob-border-primary-900 | border-color: var(--ob-primary-900) | |
ob-border-secondary-50 | border-color: var(--ob-secondary-50) | |
ob-border-secondary-100 | border-color: var(--ob-secondary-100) | |
ob-border-secondary-200 | border-color: var(--ob-secondary-200) | |
ob-border-secondary-300 | border-color: var(--ob-secondary-300) | |
ob-border-secondary-400 | border-color: var(--ob-secondary-400) | |
ob-border-secondary-500 | border-color: var(--ob-secondary-500) | |
ob-border-secondary-600 | border-color: var(--ob-secondary-600) | |
ob-border-secondary-700 | border-color: var(--ob-secondary-700) | |
ob-border-secondary-800 | border-color: var(--ob-secondary-800) | |
ob-border-secondary-900 | border-color: var(--ob-secondary-900) | |
ob-border-tertiary-50 | border-color: var(--ob-tertiary-50) | |
ob-border-tertiary-100 | border-color: var(--ob-tertiary-100) | |
ob-border-tertiary-200 | border-color: var(--ob-tertiary-200) | |
ob-border-tertiary-300 | border-color: var(--ob-tertiary-300) | |
ob-border-tertiary-400 | border-color: var(--ob-tertiary-400) | |
ob-border-tertiary-500 | border-color: var(--ob-tertiary-500) | |
ob-border-tertiary-600 | border-color: var(--ob-tertiary-600) | |
ob-border-tertiary-700 | border-color: var(--ob-tertiary-700) | |
ob-border-tertiary-800 | border-color: var(--ob-tertiary-800) | |
ob-border-tertiary-900 | border-color: var(--ob-tertiary-900) | |
ob-border-neutral-50 | border-color: var(--ob-neutral-50) | |
ob-border-neutral-100 | border-color: var(--ob-neutral-100) | |
ob-border-neutral-200 | border-color: var(--ob-neutral-200) | |
ob-border-neutral-300 | border-color: var(--ob-neutral-300) | |
ob-border-neutral-400 | border-color: var(--ob-neutral-400) | |
ob-border-neutral-500 | border-color: var(--ob-neutral-500) | |
ob-border-neutral-600 | border-color: var(--ob-neutral-600) | |
ob-border-neutral-700 | border-color: var(--ob-neutral-700) | |
ob-border-neutral-800 | border-color: var(--ob-neutral-800) | |
ob-border-neutral-900 | border-color: var(--ob-neutral-900) | |
ob-border-accent-50 | border-color: var(--ob-accent-50) | |
ob-border-accent-100 | border-color: var(--ob-accent-100) | |
ob-border-accent-200 | border-color: var(--ob-accent-200) | |
ob-border-accent-300 | border-color: var(--ob-accent-300) | |
ob-border-accent-400 | border-color: var(--ob-accent-400) | |
ob-border-accent-500 | border-color: var(--ob-accent-500) | |
ob-border-accent-600 | border-color: var(--ob-accent-600) | |
ob-border-accent-700 | border-color: var(--ob-accent-700) | |
ob-border-accent-800 | border-color: var(--ob-accent-800) | |
ob-border-accent-900 | border-color: var(--ob-accent-900) | |
ob-border-informative-50 | border-color: var(--ob-informative-50) | |
ob-border-informative-100 | border-color: var(--ob-informative-100) | |
ob-border-informative-200 | border-color: var(--ob-informative-200) | |
ob-border-informative-300 | border-color: var(--ob-informative-300) | |
ob-border-informative-400 | border-color: var(--ob-informative-400) | |
ob-border-informative-500 | border-color: var(--ob-informative-500) | |
ob-border-informative-600 | border-color: var(--ob-informative-600) | |
ob-border-informative-700 | border-color: var(--ob-informative-700) | |
ob-border-informative-800 | border-color: var(--ob-informative-800) | |
ob-border-informative-900 | border-color: var(--ob-informative-900) | |
ob-border-success-50 | border-color: var(--ob-success-50) | |
ob-border-success-100 | border-color: var(--ob-success-100) | |
ob-border-success-200 | border-color: var(--ob-success-200) | |
ob-border-success-300 | border-color: var(--ob-success-300) | |
ob-border-success-400 | border-color: var(--ob-success-400) | |
ob-border-success-500 | border-color: var(--ob-success-500) | |
ob-border-success-600 | border-color: var(--ob-success-600) | |
ob-border-success-700 | border-color: var(--ob-success-700) | |
ob-border-success-800 | border-color: var(--ob-success-800) | |
ob-border-success-900 | border-color: var(--ob-success-900) | |
ob-border-warning-50 | border-color: var(--ob-warning-50) | |
ob-border-warning-100 | border-color: var(--ob-warning-100) | |
ob-border-warning-200 | border-color: var(--ob-warning-200) | |
ob-border-warning-300 | border-color: var(--ob-warning-300) | |
ob-border-warning-400 | border-color: var(--ob-warning-400) | |
ob-border-warning-500 | border-color: var(--ob-warning-500) | |
ob-border-warning-600 | border-color: var(--ob-warning-600) | |
ob-border-warning-700 | border-color: var(--ob-warning-700) | |
ob-border-warning-800 | border-color: var(--ob-warning-800) | |
ob-border-warning-900 | border-color: var(--ob-warning-900) | |
ob-border-error-50 | border-color: var(--ob-error-50) | |
ob-border-error-100 | border-color: var(--ob-error-100) | |
ob-border-error-200 | border-color: var(--ob-error-200) | |
ob-border-error-300 | border-color: var(--ob-error-300) | |
ob-border-error-400 | border-color: var(--ob-error-400) | |
ob-border-error-500 | border-color: var(--ob-error-500) | |
ob-border-error-600 | border-color: var(--ob-error-600) | |
ob-border-error-700 | border-color: var(--ob-error-700) | |
ob-border-error-800 | border-color: var(--ob-error-800) | |
ob-border-error-900 | border-color: var(--ob-error-900) | |
ob-border-white-trans-90 | border-color: var(--ob-white-trans-90) | |
ob-border-white-trans-80 | border-color: var(--ob-white-trans-80) | |
ob-border-white-trans-70 | border-color: var(--ob-white-trans-70) | |
ob-border-white-trans-60 | border-color: var(--ob-white-trans-60) | |
ob-border-white-trans-50 | border-color: var(--ob-white-trans-50) | |
ob-border-white-trans-40 | border-color: var(--ob-white-trans-40) | |
ob-border-white-trans-20 | border-color: var(--ob-white-trans-20) | |
ob-border-white-trans-10 | border-color: var(--ob-white-trans-10) | |
ob-border-white-trans-5 | border-color: var(--ob-white-trans-5) | |
ob-border-white-trans-1 | border-color: var(--ob-white-trans-1) |