Box Sizing

Determines how the total width and height of an element is calculated. This fundamental layout utility controls whether padding and border are included in the element's dimensions or added to them. Understanding box-sizing is crucial for creating predictable layouts, especially when working with percentage-based widths.

Layout1 variant3 examples

Official Docs Open Playground

Basic usage:

<div class="box-border w-64 p-4 border-4 border-blue-500 bg-blue-100">
  This has a total width of 64px (including padding and border).
</div>

Examples

Border-box model (default in Tailwind) - width includes padding and border

<div class="box-border w-64 p-4 border-4 border-blue-500 bg-blue-100">
  This has a total width of 64px (including padding and border).
</div>

Edit in playground

Content-box model - width applies only to content, padding and border are added

<div class="box-content w-64 p-4 border-4 border-green-500 bg-green-100">
  This has a content width of 64px plus padding and border (total: 64px + 32px + 8px = 104px).
</div>

Edit in playground

Visual comparison of both box-sizing models

<!-- Comparing box models side by side -->
<div class="flex gap-4">
  <div class="box-border w-40 p-4 border-2 border-blue-500 bg-blue-100">
    <p class="text-sm font-semibold">box-border</p>
    <p class="text-sm">Width: 160px total</p>
  </div>
  <div class="box-content w-40 p-4 border-2 border-green-500 bg-green-100">
    <p class="text-sm font-semibold">box-content</p>
    <p class="text-sm">Width: 160px + 32px padding + 4px border = 196px total</p>
  </div>
</div>

Edit in playground

Live Preview

Try the Box Sizing utility with different values

Open Interactive Playground

Variants

border: padding and border included in width/height (default in Tailwind), content: padding and border added to width/height (traditional CSS box model)

bordercontent