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:
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