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-white | border-color: white; |
.k-border-inherit | border-color: inherit; |
.k-border-currentColor | border-color: currentColor; |
.k-border-transparent | border-color: transparent; |
.k-border-black | border-color: black; |
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.
Coloring Individual Sides
Use the k-border-t-{color}, k-border-r-{color}, k-border-b-{color}, and k-border-l-{color} utilities to apply a different border color to one side of an element. Replace the {color} placeholder with the desired color variable, for example, use k-border-t-warning to apply the warning color to the top side.
Coloring the Left and Right Sides
Use the k-border-x-{color} utility to apply a different border color to the left and right sides of an element. Replace {color} with the desired color variable, for example, use k-border-x-warning to apply the warning color.
Coloring the Top and Bottom Sides
Use the k-border-y-{color} utility to apply a different border color to the top and bottom sides of an element. Replace {color} with the desired color variable, for example, use k-border-y-warning to apply the warning color.
