---
title: Box Sizing
position: 2
seo_title: Telerik and Kendo UI Box Sizing Utilities
seo_description: Use the Telerik and Kendo UI Box Sizing utilities  to specify
  how the browser will calculate the size of an element.
---
## Box Sizing

The Telerik and Kendo UI Box Sizing Utilities are CSS utility classes that enable you to specify how the browser will calculate the size of an element.

<CSSRulesList data='{"id":"box-sizing"}'></CSSRulesList>

### Content

Use the `k-box-sizing-content` utility to apply a `content-box` sizing. 

In the example below, the sizes of paddings and borders will be added to the final width of the element. If an element has a width of `80px` and left and right borders of `8px` each, then the final size of the element will be `96px`.

<LiveDemo data='{"links":[],"demo":"utils/layout/box-sizing/content","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"k-border-primary k-bg-secondary"}}'></LiveDemo>

### Border

Use the `k-box-sizing-border` utility to apply a `border-box` sizing. 

In the example below, the sizes of paddings and borders will be a part of the total size of the element. If an element has a width of `80px` and left and right borders of `8px` each, then the final size of the element will remain `80px`.

<LiveDemo data='{"links":[],"demo":"utils/layout/box-sizing/border","height":200,"codePreviewSettings":{"filterSelector":"","ignoreClassNames":"","customHtml":"k-border-primary k-bg-secondary"}}'></LiveDemo>