css Beginner

Adjust box sizing in CSS

Adjust box sizing in CSS
Box Sizing Demo

Open this example in our interactive code editor to experiment with it.

Try the 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 Relative Units
css Intermediate

CSS Relative Units

Do you only use pixels or % in CSS? Open yourself to more possibilities and best practices.