How do you add 'box-sizing: border-box' to Normalize.css file?

Tags: css,css3,global,reset,css-reset

Problem :

I constantly use box-sizing: border-box; on all elements when creating CSS files, ie

* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

However I cannot seem to get this to work with the file 'Normalize.css' (

I have tried adding the above code to the top of my own CSS file, within normalize itself, but have been unsuccessful

I would very much like to utilise normalize.css as it is not as drastic as some other CSS reset files, but how do I make it accept box-sizing: border-box; so that it effects all elements and is cross browser friendly?

Solution :

The best way I have seen so far of getting box-sizing working is:

html {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    *::after {
        -webkit-box-sizing: inherit;
           -moz-box-sizing: inherit;
                box-sizing: inherit;

If your CSS reset (normalize.css) is inserted at the very top of your stylesheet, with this rule just after normalize, all should work as expected.

The rule above allows easier control over setting box-sizing: content-box for things like third party widgets.

For more information on this technique, I'd recommmend: or

    CSS Howto..

    how can I combine button with input?

    How to get the first letter of each word to be a different size and the rest to be the same size

    How can I know if I am clicking on a transparent or non-transparent part of a png on a web page?

    How to choose fontstacks

    How can I implement “CSS versioning” (to solve cache issues) using JSF 2 h:outputStylesheet?

    How to spin and rotate in css?

    CSS: how to make scrollbar appear outside div's border?

    How to make divs have table-like borders?

    How do I change the text inside a button?

    How do I stop richfaces adding borders to panels and calendars?

    How to use custom CSS to change the distance between the header and top of the page/where the page starts? [closed]

    How do I change the a border-color on rollover?

    How to style DOM element with CSS that was created with JavaScript function

    How do I change the color of Semantic UI icons?

    I've tried using vertical-align and color in static_nav div but it didn't work. Is this because its inside of the header? how would I fix this?

    How to align banner right in Internet Explorer 8

    How to create the + button with CSS?

    How to create Box Shadow rollover and hover css navigation?

    how to align divs with different width within another parent div?

    How to make a webpage mobile friendly with css media queries

    Navigation Bar - Each button is at a seperate line, how do I fix that?

    How to set background color based on YAML front matter (Jekyll)

    How can I dynamically assign css line-height to nested objects using jQuery?

    How can I style this span for a quote without causing this layout problem?

    how to write this code as link click animation

    how to make sure image shows over my twitter bootstrap 3 input field

    CSS/HTML - How do I get text to go behind an image inside a div

    How can I translate with webkit-transform enough so that

    How to implement this kind of blur effect?

    CSS table: How to position action buttons left to each row