50% off all plans with SPRING50
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.