Размещение границы внутри div, а не на его краю

Вы также можете использовать box-shadow следующим образом:

div{
    -webkit-box-shadow:inset 0px 0px 0px 10px #f00;
    -moz-box-shadow:inset 0px 0px 0px 10px #f00;
    box-shadow:inset 0px 0px 0px 10px #f00;
}

Пример здесь: http://jsfiddle.net/nVyXS/ (наведите указатель мыши на рамку)

Это работает только в современных браузерах. Например: Нет поддержки IE 8. См. caniuse.com(функция box-shadow) для получения дополнительной информации.

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

Внутренняя граница через box-shadow свойство css

Да, box-shadow используется для добавления теней к элементам. Но вы можете указать тень inset, которая будет выглядеть как внутренняя граница, а не тень. Вам просто нужно установить горизонтальные и вертикальные тени на 0px и свойство spread "box-shadow на ширину границы, которую вы хотите иметь. Итак, для" внутренней" границы 10px вы должны написать следующее:

div{
    width:100px;
    height:100px;
    background-color:yellow;
    box-shadow:0px 0px 0px 10px black inset;
    margin-bottom:20px;
}

Вот пример jsFiddle, который иллюстрирует разницу между границей box-shadow и "нормальной" границей. Таким образом, ваша граница и ширина окна составляют всего 100 пикселей, включая границу.

Подробнее о box-shadow: здесь

Пограничная граница через свойство css

Вот еще один подход, но таким образом граница будет вне поля. Вот пример . Как следует из примера, вы можете использовать свойство css outline, чтобы установить границу, которая не влияет на ширину и высоту элемента. Таким образом, ширина границы не добавляется к ширине элемента.

div{
   width:100px;
   height:100px;
   background-color:yellow;
   outline:10px solid black;
}

Подробнее о схеме: здесь

Yahoo! Это действительно возможно. Я нашел его.

Для нижней границы:

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

Для верхней границы:

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

Используйте псевдоэлемент:

.button {
    background: #333;
    color: #fff;
    float: left;
    padding: 20px;
    margin: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
}

<div class='button'>Hello</div>

Используя ::after, вы создаете виртуальный последний дочерний элемент выбранного элемента. Свойство content создает анонимный замененный элемент.

Мы содержащем псевдоэлемент, используя абсолютную позицию относительно родителя. Затем у вас есть свобода иметь любой собственный фон и/или рамку на заднем плане вашего основного элемента.

Этот подход не влияет на размещение содержимого основного элемента, который отличается от использования box-sizing: border-box;.

Рассмотрим следующий пример:

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    border: 5px solid #f00;
    border-left-width: 20px;
    box-sizing: border-box;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Здесь .button ширина ограничена с использованием родительского элемента. Установка border-left-width регулирует размер содержимого и, следовательно, положение текста.

.parent {
    width: 200px;
}

.button {
    background: #333;
    color: #fff;
    padding: 20px;
    position: relative;
}

.button::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 5px solid #f00;
    border-left-width: 20px;
}

<div class='parent'>
    <div class='button'>Hello</div>
</div>

Использование псевдоэлементного подхода не влияет на размер содержимого.

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

Я знаю, что это несколько старше, но поскольку ключевые слова "граница внутри" приземлили меня прямо здесь, я хотел бы поделиться некоторыми выводами, которые можно здесь упомянуть. Когда я добавлял границу в состояние зависания, я получил эффекты, о которых говорит OP. Пограничные рекламные пиксели до размера окна, что сделало его неустойчивым. Есть еще два способа справиться с этим, которые также работают для IE7.

1) Прикрепите границу к элементу и просто измените цвет. Таким образом, математика уже включена.

div {
   width:100px;
   height:100px;
   background-color: #aaa;
   border: 2px solid #aaa; /* notice the solid */
}

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

2) Компенсируйте свою границу с отрицательной маржой. Это все равно добавит дополнительные пиксели, но позиционирование элемента не будет нажимать на

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;">
contents here
</div>
</div>

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

Если вы используете размер окна: border-box означает не только границу, заполнение, маржа и т.д. Весь элемент будет находиться внутри родительского элемента элемент.

div p {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    width: 150px;
    height:100%;
    border: 20px solid #f00;
    background-color: #00f;
    color:#fff;
    padding: 10px;
  
}

<div>
  <p>It was popularised in the 1960s with the release of Letraset sheets</p>
</div>

Лучшее кросс-браузерное решение (в основном для поддержки IE), например, @Steve, должно сделать div 98px по ширине и высоте, чем добавить границу вокруг 1px, или вы можете сделать фоновое изображение для div 100x100 px и нарисовать границу на нем.