Utilities for controlling how the browser should calculate an element's total size.
Each example sets its width and height to 128px. .d-box-border includes padding and border within that size. .d-box-content adds them outside it. Because box-sizing is not inherited, .d-box-unset resets to content-box and has the same outer size as .d-box-content.
<dt-stack direction="row" align="center" justify="center" class="d-box-border d-size-200 d-p-100 d-ba d-baw4 d-bas-dashed d-bar-300 d-bc-default d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm">d-box-border</dt-stack></dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-box-content d-size-200 d-p-100 d-ba d-baw4 d-bas-dashed d-bar-300 d-bc-default d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm">d-box-content</dt-stack></dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-box-unset d-size-200 d-p-100 d-ba d-baw4 d-bas-dashed d-bar-300 d-bc-default d-bgc-moderate"><dt-stack direction="row" align="center" justify="center" class="d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm">d-box-unset</dt-stack></dt-stack>
Class
|
Output
|
|---|---|
| d-box-border | box-sizing: border-box !important; |
| d-box-content | box-sizing: content-box !important; |
| d-box-unset | box-sizing: unset !important; |
Box Sizing documentation last updated Thursday, October 15, 2026