Mess with the best, die like the rest… 


Quick tip: Draw border on the inside of an element using CSS

One way that you can draw a border on the inside of an HTML element rather than on the outside is to use the box-sizing CSS property like so:

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

This is supported on Firefox, Chrome, Safari, Opera and IE8+.

Note that by changing the box-sizing to border-box and declaring the css width property , the actual width of the element will not be composed of the (width value) + (padding value) +(border width value) but rather the value declared for css width property itself.

For a better understanding, please see this example. As you can see in the example, both divs have a width of 300px, padding and border width of 10px. The only difference is the box-sizing css attribute value.

You will notice that the default behavior (red) will result in a width of 340 pixels (300 + 20 + 20, we have both left and right padding and borders) but the green one will have only 300 pixels, the specified width css value. If you ask me, I kind of like it better this way :)

More details about box-sizing can be found on the Mozilla Developer Network


You must be logged in , to post a comment.

Home Uncategorized Quick tip: Draw border on the inside of an element using CSS