Borders

The Telerik and Kendo UI Border Utilities enable you to change the border settings of an element.

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 ClassCSS Property
.k-border-y-noneborder-block-style: none;
.k-border-solidborder-style: solid;
.k-border-dashedborder-style: dashed;
.k-border-dottedborder-style: dotted;
.k-border-doubleborder-style: double;
.k-border-hiddenborder-style: hidden;
.k-border-noneborder-style: none;
.k-border-t-solidborder-top-style: solid;
.k-border-t-dashedborder-top-style: dashed;
.k-border-t-dottedborder-top-style: dotted;
.k-border-t-doubleborder-top-style: double;
.k-border-t-hiddenborder-top-style: hidden;
.k-border-t-noneborder-top-style: none;
.k-border-r-solidborder-right-style: solid;
.k-border-r-dashedborder-right-style: dashed;
.k-border-r-dottedborder-right-style: dotted;
.k-border-r-doubleborder-right-style: double;
.k-border-r-hiddenborder-right-style: hidden;
.k-border-r-noneborder-right-style: none;
.k-border-b-solidborder-bottom-style: solid;
.k-border-b-dashedborder-bottom-style: dashed;
.k-border-b-dottedborder-bottom-style: dotted;
.k-border-b-doubleborder-bottom-style: double;
.k-border-b-hiddenborder-bottom-style: hidden;
.k-border-b-noneborder-bottom-style: none;
.k-border-l-solidborder-left-style: solid;
.k-border-l-dashedborder-left-style: dashed;
.k-border-l-dottedborder-left-style: dotted;
.k-border-l-doubleborder-left-style: double;
.k-border-l-hiddenborder-left-style: hidden;
.k-border-x-solidborder-inline-style: solid;
.k-border-x-dashedborder-inline-style: dashed;
.k-border-x-dottedborder-inline-style: dotted;
.k-border-x-doubleborder-inline-style: double;
.k-border-x-hiddenborder-inline-style: hidden;
.k-border-x-noneborder-inline-style: none;
.k-border-y-solidborder-block-style: solid;
.k-border-y-dashedborder-block-style: dashed;
.k-border-y-dottedborder-block-style: dotted;
.k-border-y-doubleborder-block-style: double;
.k-border-y-hiddenborder-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.