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.
| Utility Class | CSS Property |
|---|---|
.k-box-sizing-content | box-sizing: content-box; |
.k-box-sizing-border | box-sizing: border-box; |
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.
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.
