Border Style
The Telerik and Kendo UI Border Style Utilities are a collection of CSS classes that enable you to control the border style of an element.
Utility Class | CSS Property |
---|---|
.k-border-y-none | border-block-style: none; |
.k-border-solid | border-style: solid; |
.k-border-dashed | border-style: dashed; |
.k-border-dotted | border-style: dotted; |
.k-border-double | border-style: double; |
.k-border-hidden | border-style: hidden; |
.k-border-none | border-style: none; |
.k-border-t-solid | border-top-style: solid; |
.k-border-t-dashed | border-top-style: dashed; |
.k-border-t-dotted | border-top-style: dotted; |
.k-border-t-double | border-top-style: double; |
.k-border-t-hidden | border-top-style: hidden; |
.k-border-t-none | border-top-style: none; |
.k-border-r-solid | border-right-style: solid; |
.k-border-r-dashed | border-right-style: dashed; |
.k-border-r-dotted | border-right-style: dotted; |
.k-border-r-double | border-right-style: double; |
.k-border-r-hidden | border-right-style: hidden; |
.k-border-r-none | border-right-style: none; |
.k-border-b-solid | border-bottom-style: solid; |
.k-border-b-dashed | border-bottom-style: dashed; |
.k-border-b-dotted | border-bottom-style: dotted; |
.k-border-b-double | border-bottom-style: double; |
.k-border-b-hidden | border-bottom-style: hidden; |
.k-border-b-none | border-bottom-style: none; |
.k-border-l-solid | border-left-style: solid; |
.k-border-l-dashed | border-left-style: dashed; |
.k-border-l-dotted | border-left-style: dotted; |
.k-border-l-double | border-left-style: double; |
.k-border-l-hidden | border-left-style: hidden; |
.k-border-x-solid | border-inline-style: solid; |
.k-border-x-dashed | border-inline-style: dashed; |
.k-border-x-dotted | border-inline-style: dotted; |
.k-border-x-double | border-inline-style: double; |
.k-border-x-hidden | border-inline-style: hidden; |
.k-border-x-none | border-inline-style: none; |
.k-border-y-solid | border-block-style: solid; |
.k-border-y-dashed | border-block-style: dashed; |
.k-border-y-dotted | border-block-style: dotted; |
.k-border-y-double | border-block-style: double; |
.k-border-y-hidden | border-block-style: hidden; |
Applying a Border Style
Use the k-border-{style}
utility to apply a different border style to an element. Replace {style}
with the variable for the desired style.
Applying No Border Style
Use the k-border-none
utility to remove all border styles from an element.
Styling Individual Sides
Use the k-border-t-{style}
, k-border-r-{style}
, k-border-b-{style}
, k-border-l-{style}
to apply different border styles to one side of an element. Replace {style}
with the variable for the desired style.
Styling Left and Right Sides
Use the k-border-x-{style}
to apply a different border style to the left and right sides of an element. Replace {style}
with the variable for the desired style.
Styling Top and Bottom Sides
Use the k-border-y-{style}
utilities to apply a different border style to the top and bottom sides of an element. Replace {style}
with the variable for the desired style.