Box Sizing box-*

Control how the browser calculates an element's total width and height with box-sizing utilities.

Quick Reference

box-border

Include padding and border in element's total width/height

box-sizing: border-box

box-content

Exclude padding and border from element's width/height

box-sizing: content-box

Interactive Examples

box-border (border-box)

Total: 256px × 128px

Width: 256px (includes 8px border + 16px padding)

Height: 128px (includes 8px border + 16px padding)

Content area: 232px × 104px

<div class="w-64 h-32 border-4 p-4 box-border">
  Content fits within specified dimensions
</div>

box-content (content-box)

Total: 288px × 160px

Content: 256px × 128px

+ Border: 8px + Padding: 16px

Total: 288px × 160px

<div class="w-64 h-32 border-4 p-4 box-content">
  Content area is exactly 256px × 128px
</div>

Side-by-Side Comparison

box-border

192px × 96px total
← 192px →
96px

box-content

192px × 96px content
← 208px →
112px

Practical Layout Example

Grid with box-border (Predictable sizing)

Card 1
Card 2
Card 3

Grid with box-content (Unpredictable sizing)

Card 1
Card 2
Card 3
<!-- Predictable grid layout -->
<div class="grid grid-cols-3 gap-4">
  <div class="border-2 p-4 box-border">Card</div>
</div>

Common Use Cases

📦 Card Layouts

Ensure consistent card sizes regardless of padding and borders.

<div class="box-border w-64 p-4 border">

📱 Form Elements

Create predictable input field sizing with padding and borders.

<input class="box-border w-full p-3 border">

🎯 Grid Systems

Maintain grid alignment when adding padding or borders.

<div class="box-border grid-cols-3">

🖼️ Image Containers

Control exact dimensions for image wrapper elements.

<div class="box-border w-48 h-48 p-2">

🔘 Buttons

Ensure consistent button sizes with padding and borders.

<button class="box-border px-4 py-2 border">

📐 Layout Containers

Create precise layout containers with predictable dimensions.

<div class="box-border max-w-md p-6">

Detailed Box Model Comparison

box-border (border-box)

Content Area
Border
Padding

Total Width: width property value

Content Width: width - padding - border

Calculation: Inward sizing

Width Property:200px
Border:4px × 2 = 8px
Padding:16px × 2 = 32px
Content Width:160px

box-content (content-box)

Content Area
Border
Padding

Content Width: width property value

Total Width: width + padding + border

Calculation: Outward sizing

Content Width:200px
Border:4px × 2 = 8px
Padding:16px × 2 = 32px
Total Width:240px

Best Practices

✅ Do

  • • Use box-border for most layout elements
  • • Apply globally with CSS reset for consistency
  • • Use for form elements to ensure predictable sizing
  • • Combine with responsive design utilities
  • • Use for grid and flexbox containers
  • • Apply to components with borders and padding

❌ Don't

  • • Mix box-sizing models in the same layout
  • • Use box-content for complex layouts
  • • Forget to account for box model in calculations
  • • Apply inconsistently across components
  • • Use without understanding the implications
  • • Override without good reason

Browser Support & Performance

🌐 Browser Support

Chrome✓ 10+
Firefox✓ 29+
Safari✓ 5.1+
Edge✓ 12+
IE✓ 8+

⚡ Performance Notes

  • • No performance impact - CSS property only
  • • Affects layout calculation, not rendering speed
  • • Border-box is generally more predictable
  • • Reduces need for complex calculations
  • • Improves developer experience
  • • Standard in modern CSS frameworks

Related Layout Classes

box-decoration-*

Box decoration break utilities

box-border

Current page

container

Container utilities