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:

1
2
3
4
5
6
.example
{
   -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

Hope it helps ;)

Comments

8 Responses to “Quick tip: Draw border on the inside of an element using CSS”
  1. Ando says:

    Whoa, I’d never heard of the box-sizing attribute until now. Great trick! Should be useful knowledge. :)

  2. Krishna says:

    I never used box-sizing. New thing I have learned today. Thanks

  3. Raul says:

    Thanks for the tip I didn’t know that one.

  4. conrad says:

    it’s pretty neat trick, will save you massive amount of time !

  5. Jojo says:

    How about the top and bottom?

  6. Paul says:

    Very cool!

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!