Border Color
The Telerik and Kendo UI Border Color Utilities are a collection of CSS classes that enable you to control the border color of an element.
| Utility Class | CSS Property |
|---|---|
.k-border-dark-emphasis | border-color: var(--kendo-color-dark-emphasis, #212529); |
.k-border-inherit | border-color: inherit; |
.k-border-currentColor | border-color: currentColor; |
.k-border-transparent | border-color: transparent; |
.k-border-black | border-color: black; |
.k-border-white | border-color: white; |
.k-border-app-surface | border-color: var(--kendo-color-app-surface, #fafafa); |
.k-border-on-app-surface | border-color: var(--kendo-color-on-app-surface, #424242); |
.k-border-subtle | border-color: var(--kendo-color-subtle, #666666); |
.k-border-surface | border-color: var(--kendo-color-surface, #ffffff); |
.k-border-surface-alt | border-color: var(--kendo-color-surface-alt, #f5f5f5); |
.k-border-border | border-color: var(--kendo-color-border, #d9d9d9); |
.k-border-border-alt | border-color: var(--kendo-color-border-alt, #e0e0e0); |
.k-border-base-subtle | border-color: var(--kendo-color-base-subtle, #f0f0f0); |
.k-border-base-emphasis | border-color: var(--kendo-color-base-emphasis, #000000); |
.k-border-primary-subtle | border-color: var(--kendo-color-primary-subtle, #e3f2fd); |
.k-border-primary | border-color: var(--kendo-color-primary, #2196f3); |
.k-border-primary-emphasis | border-color: var(--kendo-color-primary-emphasis, #1976d2); |
.k-border-secondary-subtle | border-color: var(--kendo-color-secondary-subtle, #f3e5f5); |
.k-border-secondary | border-color: var(--kendo-color-secondary, #9c27b0); |
.k-border-secondary-emphasis | border-color: var(--kendo-color-secondary-emphasis, #7b1fa2); |
.k-border-tertiary-subtle | border-color: var(--kendo-color-tertiary-subtle, #fff3e0); |
.k-border-tertiary | border-color: var(--kendo-color-tertiary, #ff9800); |
.k-border-tertiary-emphasis | border-color: var(--kendo-color-tertiary-emphasis, #f57c00); |
.k-border-info-subtle | border-color: var(--kendo-color-info-subtle, #e1f5fe); |
.k-border-info | border-color: var(--kendo-color-info, #00bcd4); |
.k-border-info-emphasis | border-color: var(--kendo-color-info-emphasis, #0097a7); |
.k-border-success-subtle | border-color: var(--kendo-color-success-subtle, #e8f5e8); |
.k-border-success | border-color: var(--kendo-color-success, #4caf50); |
.k-border-success-emphasis | border-color: var(--kendo-color-success-emphasis, #388e3c); |
.k-border-warning-subtle | border-color: var(--kendo-color-warning-subtle, #fff8e1); |
.k-border-warning | border-color: var(--kendo-color-warning, #ff9800); |
.k-border-warning-emphasis | border-color: var(--kendo-color-warning-emphasis, #f57c00); |
.k-border-error-subtle | border-color: var(--kendo-color-error-subtle, #ffebee); |
.k-border-error | border-color: var(--kendo-color-error, #f44336); |
.k-border-error-emphasis | border-color: var(--kendo-color-error-emphasis, #d32f2f); |
.k-border-light-subtle | border-color: var(--kendo-color-light-subtle, #f8f9fa); |
.k-border-light | border-color: var(--kendo-color-light, #f8f9fa); |
.k-border-light-emphasis | border-color: var(--kendo-color-light-emphasis, #dee2e6); |
.k-border-dark-subtle | border-color: var(--kendo-color-dark-subtle, #6c757d); |
.k-border-dark | border-color: var(--kendo-color-dark, #343a40); |
Applying a Border Color
Use the k-border-{color} to apply a different border color to an element. Replace {color} with the desired color variable, for example, k-border-solid.
