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

Another option, if your background color is solid:

body { background-color: #FFF; }

.myDiv {
    width: 100px;
    height: 100px;
    border: 3px solid #FFF;  // Border is essentially invisible since background is also #FFF;
}

.myDiv:hover {
    border-color: blue;  // Just change the border color
}