css Beginner

Adjust box sizing in CSS

Adjust box sizing in CSS
Photo by Erda Estremera on Unsplash
Box Sizing Demo
Interactive editor — edit code and see live results Open in Editor

Border-box property

*, *:before, *:after {
  box-sizing: border-box;
}

Summary

  • Add the above code to your main CSS file to take effect.
  • Select all selector targets all HTML elements, including all pseudo-elements.
  • Then, the box-sizing property is overridden to border-box instead of default content-box.

Try this in our interactive code editor

Practice hands-on with our built-in code sandbox.

Open Code Editor
Adrian Bigaj
Adrian Bigaj

Creator of BigDevSoon

Full-stack developer and educator passionate about helping developers build real-world skills through hands-on projects. Creator of BigDevSoon, a vibe coding platform with 21 projects, 100 coding challenges, 40+ practice problems, and Merlin AI.

X LinkedIn

Related Pills

Outline HTML elements
css Beginner

Outline HTML elements

Outline all your HTML elements with a single line of CSS.

Place HTML Elements Absolutely with CSS
css Beginner

Place HTML Elements Absolutely with CSS

Use a combination of position relative and absolute to place text on the image card.

CSS Animated Accordion
css Beginner

CSS Animated Accordion

Smooth open/close animations on native details elements using interpolate-size — no JavaScript height measurement.