---
title: Border Color
position: 3
seo_title: Telerik and Kendo UI Border Color Utilities
seo_description: Use the Telerik and Kendo UI Border Color Utilities to change
  the border color of an element by using a set of predefined classes.
---
## Border Color

The Telerik and Kendo UI Border Color Utilities are a collection of CSS classes that enable you to control the border color of an element.

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

### Applying a Border Color

Use the `k-border-{color}` to apply a different border color to an element. Replace `{color}` with the desired color variable, for example, `k-border-solid`.

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