Добавление границы в div без увеличения размеров в CSS

Быстрый ответ

Если вы хотите ограничить границу в пределах <div>, используйте box-sizing: border-box;. Это CSS-свойство учтет ваши отступы (padding) и границы (border) в заданной ширине (width) и высоте (height) элемента и не будет его расширять.

.div-border-inside {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  border: 20px solid red; /* Вот вам насладитесь красочностью */
  padding: 10px;
}

Присвоив этот класс вашему <div>, вы получите стиль с внутренней границей:

<div class="div-border-inside"></div>

Размер блока составляет 100px, границы уже учтены в этих параметрах.

Совместимость с браузерами

Для обеспечения поддержки старых версий браузеров, добавьте:

.div-border-inside {
  -webkit-box-sizing: border-box; /* Специально для Safari */
  -moz-box-sizing: border-box; /* Для пользователей Firefox */
  box-sizing: border-box;
  /* Остальные стили */
}

Свойства с префиксами обеспечивают совместимость даже с IE8+.

Внутренние границы с эффектом свечения через box-shadow

Для создания внутренних границ и эффекта мягкого свечения используйте box-shadow:

.div-shadow-border-inside {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  box-shadow: inset 0px 0px 0px 10px red; /* Моя страсть к красному цвету продолжается */
  padding: 10px;
}

Рекомендуется проверить поддержку браузерами на сайте Can I use.

Эффектные контуры границ, не изменяющие размеры

Outline — превосходный способ создать границу без изменения размера или расположения элемента:

.div-outline-border-inside {
  outline: 2px solid red; /* Чувствуете этот красный оттенок? */
  outline-offset: -2px; /* Сместите внутрь, но без перемещения элемента */
}

Outline-offset со знаком минус позволит переместить контур границы внутрь тега <div>.

Варианты использования для конкретных случаев

Ситуация: Множественные внутренние границы

Создайте множественные границы, отделенные запятыми, для впечатляющего эффекта:

.div-multiple-borders {
  box-shadow: inset 0 0 0 5px red, inset 0 0 0 10px blue; /* Красный и синий – вот это сочетание! */
}

Подробнее об этом расскажет наш спикер на видео

Ситуация: Эффекты при наведении

Оживите элемент при наведении курсора:

.div-hover-effect:hover {
  box-shadow: inset 0 0 0 5px green; /* Наведите и вуаля – зеленый! */
}

Ситуация: Регулировка цвета и распространения

Настраивайте ширину распространения границы, играйте с цветом с помощью RGBA:

.div-colored-border {
  box-shadow: inset 0 0 0px 10px rgba(255, 0, 0, 0.5); /* Опять красный, но уже более мягкий */
}

Визуализация

🖼️: [ Ваш Пример ]
🖼️: [ ........................ ]  <!-- Пустое место -->

👉 Применяем box-shadow для создания внутренней границы.

.artwork { 
  box-shadow: inset 0 0 0 2px blue; 
}

👉 Использование outline для границы, которая внедрена внутрь.

.artwork {
  outline: 2px solid blue;
  outline-offset: -2px;
}

Продвинутые примеры

3D эффект

Удивите окружающих 3D эффектом с применением внутренней тени box-shadow:

.div-depth-effect {
  box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.4); /* Ваш собственный 3D */
}

Декоративные двойные границы

Изяществом можно удивить не меньше, чем сложностью. Создайте двойные границы с box-shadow:

.div-decorative-borders {
  box-shadow: inset 0px 0px 0px 3px #EFEFEF, inset 0px 0px 0px 6px #BDBDBD; /* Очаровательно, не правда ли? */
}

Анимированные переходы границ

Не хотите, чтобы границы были неподвижными? Добавьте анимацию:

.div-animated-border {
  transition: box-shadow 0.3s ease;
}
.div-animated-border:hover {
  box-shadow: inset 0 0 0 3px orange; /* Оранжевый взрыв при наведении! */
}

Полезные материалы

1. Введение в базовую модель блока CSS – CSS: Каскадные таблицы стилей | MDN — Полное руководство по модели блока CSS.
2. CSS Границы – W3Schools — Совершенствуйте свои навыки работы с границами CSS.
3. Box Sizing | CSS-Tricks — Почему box-sizing: border-box; считается фундаментальным в мире CSS-модели блоков.
4. CSS Псевдоэлементы – W3Schools — Полезная статья о псевдоэлементах ::before и ::after.
5. Box-shadow, одна из лучших возможностей CSS3 – CSS3 . Info — Отличное руководство по использованию теней из «Библии CSS3».
6. Отзывчивый веб-дизайн: что это такое и как его использовать — Smashing Magazine — Держите свой статус веб-дизайнерских элит на высочайшем уровне.