Box sizing

Syntax

Class
Properties
border-box
box-sizing: border-box;
content-box
box-sizing: content-box;
<div class="t1 border-box w-200 bg-c-white b-16-blue shadow-4 text-center color-gray-800"> border box </div> <div class="t1 fixed inset-0 flex flex-center -z-1"> <div class="t1 w-200 h-full bg-c-black-20 color-black font-12 font-mono text-center">&lt;- 200px -&gt;</div> </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Use border-box.
t1 border-box
.t1.border-box { box-sizing: border-box; }
Use content-box.
t1 content-box
.t1.content-box { box-sizing: content-box; }