Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Universal border-box reset */ *, *::before, *::after { box-sizing: border-box; } /* Inheritable version — safer for third-party components: */ html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* Example: two columns that always total 100% */ .col { width: 50%; padding: 1rem; /* with content-box this would overflow */ float: left; /* border-box keeps them at exactly 50% */ } /* Input that fits its container exactly */ input[type="text"] { width: 100%; padding: 8px 12px; /* no overflow because border-box */ border: 2px solid #9e9e9e; border-radius: 4px; }
Result
Open