Расположение границы внутри div, а не на его краю

Вы можете использовать свойства outline и outline-offset с отрицательным значением вместо обычной обводки border, и это работает для меня:

div {
    height: 100px;
    width: 100px;
    background-color: grey;
    margin-bottom: 10px; 
}

div#border {
    border: 2px solid red;
}

div#outline {
    outline: 2px solid red;
    outline-offset: -2px;
}

Использование обычной обводки.
<div id="border"></div>

Использование outline и outline-offset.
<div id="outline"></div>

Таким образом, outline позволяет вам добиться аналогичного эффекта выделения элементов без изменения их размеров, что может быть полезно в некоторых случаях.

Да, это действительно возможно! Я нашел рабочее решение.

Для нижней границы используйте следующий код:

div {box-shadow: 0px -3px 0px red inset; }

А для верхней границы подойдёт такой вариант:

div {box-shadow: 0px 3px 0px red inset; }

Таким образом, вы сможете создать цветные границы для верхней и нижней части элемента с помощью свойства box-shadow.

Я тоже потратил некоторое время, разбираясь с этой проблемой.

Нашел ответ и хочу поделиться им здесь, даже если прошло уже 11 лет.

Вы можете использовать свойство outline.

Пример:

div {
    outline: 0.2vw solid red;
}

Надеюсь, это сэкономит время тем, кто также ищет решение спустя годы.

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

Когда я добавлял границу в состоянии наведения, я столкнулся с теми же проблемами, о которых говорит автор вопроса. Граница добавляет пиксели к размерам элемента, из-за чего он выглядит "прыгающим".

Существуют два способа решения этой проблемы, которые также подходят для IE7.

1)
Можно заранее установить границу для элемента и просто изменить её цвет. Таким образом, размеры уже будут учитываться.

div {
   width: 100px;
   height: 100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* обратите внимание на solid */
}

div:hover {
   border: 2px dashed #666;
}

Можно компенсировать границу отрицательным марджином. Это всё равно добавит дополнительные пиксели, но позиционирование элемента не будет "прыгающим".

div {
   width: 100px;
   height: 100px;
   background-color: #aaa;
}

div:hover {
   margin: -2px;
   border: 2px dashed #333;
}

Эти методы помогут избежать нежелательных сдвигов элементов при наведении.

Для обеспечения консистентного отображения между новыми и старыми браузерами рекомендуется использовать двойной контейнер: внешний с заданной шириной, а внутренний с рамкой. Вы можете сделать это следующим образом:

<div style="width:100px;">
    <div style="border:2px solid #000;">
        содержимое здесь
    </div>
</div>

Однако имейте в виду, что такой подход имеет смысл только в том случае, если точная ширина важнее наличия дополнительной разметки!