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

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

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

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

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

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

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

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

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

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