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

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

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

### Rounding Corners

Use the `k-rounded`, `k-rounded-sm`, `k-rounded-md`, `k-rounded-lg`, and `k-rounded-full` utilities to apply different border radius sizes to an element.

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

### Applying No Rounding

Use the `k-rounded-0` utility to remove the border radius of an element.

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

### Rounding Individual Sides

Use the `k-rounded-{side}`, `k-rounded-{side}-sm`, `k-rounded-{side}-md`, `k-rounded-{side}-lg`, and `k-rounded-{side}-full` utilities to apply a different border radius size to a specific side of an element. Replace `{side}` with the desired side of the element, for example, use `k-rounded-tl` to change the top left side of the element.

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

### Rounding Individual Corners

Use the `k-rounded-{corner}`, `k-rounded-{corner}-sm`, `k-rounded-{corner}-md`, `k-rounded-{corner}-lg`, and `k-rounded-{corner}-full` utilities to apply a different border radius size to specific corners of an element. Replace `{corner}` with the desired corners of the element, for example, use `k-rounded-l` to round the left corners of the element.

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