Как придать границу любому элементу, используя css, не добавляя border-width ко всей ширине элемента?

Question

Как задать границу для любого элемента, используя css, не добавляя border-width ко всей ширине элемента?

Как и в фотошопе, мы можем сделать инсульт - внутри, по центру и снаружи

Я думаю, что стандартные свойства CSS-границы по центру подобны центру в фотошопе, верно?

Я хочу дать границу внутри коробки, а не снаружи. и не хочу включать ширину границы в ширину поля.

Answer 1

Другой вариант, если цвет фона сплошной:

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
}