Border Width
The Telerik and Kendo UI Border Width Utilities are a collection of CSS classes that enable you to control the border width of an element.
| Utility Class | CSS Property |
|---|---|
.k-border-y-8 | border-block-width: 8px; |
.k-border | border-width: 1px; |
.k-border-0 | border-width: 0; |
.k-border-2 | border-width: 2px; |
.k-border-4 | border-width: 4px; |
.k-border-8 | border-width: 8px; |
.k-border-t | border-top-width: 1px; |
.k-border-t-0 | border-top-width: 0px; |
.k-border-t-2 | border-top-width: 2px; |
.k-border-t-4 | border-top-width: 4px; |
.k-border-t-8 | border-top-width: 8px; |
.k-border-r | border-right-width: 1px; |
.k-border-r-0 | border-right-width: 0px; |
.k-border-r-2 | border-right-width: 2px; |
.k-border-r-4 | border-right-width: 4px; |
.k-border-r-8 | border-right-width: 8px; |
.k-border-b | border-bottom-width: 1px; |
.k-border-b-0 | border-bottom-width: 0px; |
.k-border-b-2 | border-bottom-width: 2px; |
.k-border-b-4 | border-bottom-width: 4px; |
.k-border-b-8 | border-bottom-width: 8px; |
.k-border-l | border-left-width: 1px; |
.k-border-l-0 | border-left-width: 0px; |
.k-border-l-2 | border-left-width: 2px; |
.k-border-l-4 | border-left-width: 4px; |
.k-border-l-8 | border-left-width: 8px; |
.k-border-x | border-inline-width: 1px; |
.k-border-x-0 | border-inline-width: 0px; |
.k-border-x-2 | border-inline-width: 2px; |
.k-border-x-4 | border-inline-width: 4px; |
.k-border-x-8 | border-inline-width: 8px; |
.k-border-y | border-block-width: 1px; |
.k-border-y-0 | border-block-width: 0px; |
.k-border-y-2 | border-block-width: 2px; |
.k-border-y-4 | border-block-width: 4px; |
Applying Width to All Sides
Use the k-border, k-border-0, k-border-2, k-border-4, and k-border-8 utilities to apply the different border width sizes to an element.
Applying Width to Individual Sides
Use the k-border-{side}, k-border-{side}-0, k-border-{side}-2, k-border-{side}-4, and k-border-{side}-8 utilities to apply a different border width size to one side of an element. Replace {side} with the desired side of the element, for example, use k-border-l to set the border width of the left side.
Applying Width to the Left and Right Sides
Use the k-border-x, k-border-x-0, k-border-x-2, k-border-x-4, and k-border-x-8 utilities to apply a different border width size to the left and right sides of an element.
Applying Width to the Top and Bottom Sides
Use the k-border-y, k-border-y-0, k-border-y-2, k-border-y-4, and k-border-y-8 to apply a different border width size to the top and bottom sides of an element.
