All examples below have a 128px height and width. You can see how .d-box-border elements includes the padding and border into the overall box's height and width.
< dt-stackdirection = " row" align = " center" justify = " center" class = " d-size-200 d-p-100 d-ba d-baw4 d-bas-dashed d-bar-300 d-bc-default d-bgc-moderate d-box-border" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm" > </ dt-stack> </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-size-200 d-p-100 d-ba d-baw4 d-bas-dashed d-bar-300 d-bc-default d-bgc-moderate d-box-content" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm" > </ dt-stack> </ dt-stack> < dt-stackdirection = " row" align = " center" justify = " center" class = " d-size-200 d-p-100 d-ba d-baw4 d-bas-dashed d-bar-300 d-bc-default d-bgc-moderate d-box-unset" > < dt-stackdirection = " row" align = " center" justify = " center" class = " d-fl1 d-as-stretch d-p-100 d-bgc-moderate-opaque d-bar-200 d-code--sm" > </ dt-stack> </ dt-stack>
Raw HTML renders visuals only. You may need to add JS to replicate its functionality.