How to give border to any element using css without adding border-width to the whole width of element?

Question

How to give border to any element using css without adding border-width to the whole width of element?

Like in Photoshop we can give stroke- Inside , center and out

Answer 1

Use box-sizing: border-box in order to create a border INSIDE a div without modifying div width.

Use outline to create a border OUTSIDE a div without modifying div width.

Here an example: https://jsfiddle.net/4000cae9/1/

Notes: border-box currently it is not supported by IE

Support:

http://caniuse.com/#feat=outline

http://caniuse.com/#search=border-box

#test, #test2 {
    width: 100px;
    height:100px;
    background-color:yellow;
}
#test {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 10px dashed blue;
}
#test2 {
    outline: 10px dashed red;
}


Use box-sizing: border-box to create a border INSIDE a div without modifying div width.
border-box
Use outline to create a border OUTSIDE a div without modifying div width.
outline