---
title: Border Style
position: 4
seo_title: Telerik and Kendo UI Border Style Utilities
seo_description: Use the Telerik and Kendo UI Border Width utilities to change
  the border style of an element by using a set of predefined classes.
---
## 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.

<CSSRulesList data='{"id":"border-style"}'></CSSRulesList>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/borders/border-style/all-sides","height":200,"codePreviewSettings":{"filterSelector":".k-border-primary","ignoreClassNames":"k-w-20 k-h-20 k-bg-secondary k-box-sizing-border"}}'></LiveDemo>

### 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.

<LiveDemo data='{"links":[],"demo":"utils/borders/border-style/individual","height":200,"codePreviewSettings":{"filterSelector":".k-border-primary","ignoreClassNames":"k-w-20 k-h-20 k-bg-secondary"}}'></LiveDemo>

### Styling Horizontal and Vertical 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.

<LiveDemo data='{"links":[],"demo":"utils/borders/border-style/horizontal-vertical","height":200,"codePreviewSettings":{"filterSelector":".k-border-primary","ignoreClassNames":"k-w-20 k-h-20 k-bg-secondary"}}'></LiveDemo>