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