Свойство border в CSS: как сделать рамку и какие бывают стили

Рамку вокруг элемента в CSS задаёт свойство border. Достаточно одной строки: border: 1px solid #ccc;, где 1px отвечает за толщину, solid за стиль линии, а #ccc за цвет. Обязателен только стиль: без него рамки не будет при любой толщине и цвете.

Ниже разобраны все десять значений border-style с картинкой, рамка с одной стороны, цвет, скругление и ошибки, на которых чаще всего ломается вёрстка. Если CSS для вас пока новая тема, начните с обзора что такое CSS и как его использовать или загляните в подборку курсов по CSS.

CheckroiПодборка курсов по CSS181 курс • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить→

Как сделать рамку в CSS за три шага

Пример ниже работает в любом браузере. Стили можно положить в отдельный файл или в тег <style>, способы разобраны в инструкции как подключить CSS к HTML.

1. Дайте элементу класс в HTML: <div class="card">Текст</div>.
2. В CSS напишите правило для этого класса и свойство border.
3. Перечислите через пробел толщину, стиль и цвет. Порядок не важен, border: red 4px dashed тоже сработает.

.card {
  border: 1px solid #ccc;
  padding: 16px;
}

Свойство border сокращённое: одна строка заполняет сразу двенадцать отдельных свойств, по ширине, стилю и цвету для каждой из четырёх сторон. Что подставится, если какое-то значение пропустить:

Значения по умолчанию взяты из справочника MDN о свойстве border. В Chrome 157 строка border: solid без толщины и цвета даёт рамку 3px цвета текста.

Все стили border-style с примерами

У border-style десять значений. Все они показаны на рамке толщиной 6px, чтобы разница была видна.

Объёмные стили groove, ridge, inset и outset браузер рисует двумя оттенками заданного цвета, поэтому на чёрном и очень тёмном цвете эффект почти не заметен.

Стиль double требует толщины от 3px. По спецификации CSS Backgrounds and Borders две линии и зазор между ними вместе равны border-width. На 2px Chrome рисует сплошную полосу без просвета, на 3px уже линию, зазор и линию по одному пикселю.

Разница между none и hidden видна только в таблице с border-collapse: collapse: hidden у ячейки побеждает рамку соседней ячейки, none уступает ей. В остальных случаях оба значения просто убирают рамку.

Рамка только с одной стороны

Для отдельной стороны есть свои сокращённые свойства. Синтаксис тот же, что у border.

.title {
  border-bottom: 3px solid #2563eb; /* линия под заголовком */
}
.note {
  border-left: 6px solid #f59e0b; /* цветная полоса у цитаты */
  padding-left: 16px;
}

• border-top: сверху;
• border-right: справа;
• border-bottom: снизу;
• border-left: слева.

Цветную полосу слева часто ставят у цитат и врезок. Как оформить сам абзац, показано в разборе тега p в HTML.

Ещё один приём: задать рамку целиком и убрать лишнюю сторону. Например, border: 1px solid #ddd; border-top: none; оставит три стороны.

Если сайт переводят на арабский или иврит, удобнее логические свойства. border-inline-start рисует рамку в начале строки: при обычном направлении текста она слева, а с dir="rtl" браузер сам переносит её направо. В Chrome при ltr получается левая граница 4px, при rtl правая.

Толщина и цвет рамки отдельно

Свойства border-width и border-color принимают от одного до четырёх значений. Порядок такой же, как у отступов: верх, право, низ, лево, по часовой стрелке. Как устроены сами отступы padding и margin, мы разбирали в статье про тег div и оформление блоков.

Вместо пикселей толщину можно задать словами. Спецификация закрепила за ними точные значения: thin равен 1px, medium 3px, thick 5px. Chrome возвращает ровно эти цифры.

Цвет рамки CSS принимает в любом формате: #2563eb, rgb(37 99 235), hsl() или имя вроде red. Два особых значения:

• currentcolor берёт цвет текста. Удобно для иконок и кнопок: поменяли color, рамка перекрасилась сама;
• transparent делает рамку прозрачной. Место она при этом занимает, и это пригодится в разделе об ошибках.

Скругление углов через border-radius

Свойство border-radius скругляет углы рамки, фона и тени сразу. Работает и без рамки, на одном фоне. Чаще всего его ставят кнопкам, а как собрать саму кнопку и её состояния, показано в инструкции как сделать кнопку в HTML.

.button {
  border: 2px solid #2563eb;
  border-radius: 16px;   /* мягкие углы */
}
.avatar {
  width: 96px;
  height: 96px;
  border: 4px solid #10b981;
  border-radius: 50%;    /* круг */
}

Значение 50% у квадратного блока даёт круг, у прямоугольного овал. Так делают круглые аватарки: как вставить саму картинку, мы разобрали в статье как вставить картинку в HTML.

Как выглядят рамка с одной стороны, скругление, разные цвета сторон и замены border, видно на втором наборе примеров:

Рамка с градиентом через border-image

Обычный border-color градиент не принимает. Для градиентной или картиночной рамки есть border-image:

.promo {
  border: 6px solid;
  border-image: linear-gradient(90deg, #2563eb, #ec4899) 1;
}

Цифра 1 в конце задаёт, как нарезать изображение на углы и стороны. Для градиента её хватает.

Ограничение одно, но заметное: border-image не скругляется. Спецификация прямо говорит, что border-radius на картинку рамки не действует. В Chrome при border-radius: 30px угол такой рамки остаётся прямым. Если нужен скруглённый градиент, делают обёртку с градиентным фоном и внутренний блок с отступом.

Канал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 800 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал→

Border, outline или box-shadow

Обвести элемент можно тремя свойствами, и они по-разному влияют на размеры.

По справке MDN об outline, обводки не занимают места и не влияют на раскладку. Блок шириной 300px с outline: 5px остаётся шириной 300px.

Outline браузер рисует на фокусе с клавиатуры, например у ссылок и полей формы. Если убрать его через outline: none и ничего не дать взамен, человек, который ходит по сайту клавишей Tab, перестанет видеть, где он.

Частые ошибки с рамками

Рамки не видно

Записали border: 2px red и ничего не появилось. Причина в пропущенном стиле: по умолчанию он none, а при none толщина рамки считается нулевой. Chrome в этом случае возвращает ширину 0px.

Решение: всегда указывать стиль, хотя бы solid.

Блок стал шире заданного

По умолчанию width задаёт только ширину содержимого. Рамка и внутренние отступы прибавляются сверху: блок с width: 300px, padding: 20px и рамкой 5px в Chrome занимает 350px.

Решение: box-sizing: border-box, тогда рамка и отступы входят в 300px. Справка по свойству есть на MDN о box-sizing.

*, *::before, *::after {
  box-sizing: border-box;
}

При наведении всё прыгает

Кнопка без рамки на :hover получает border: 2px solid и подрастает. Высота блока с padding: 10px вырастает с 38 до 42px, на 2px с каждой стороны, и соседние элементы сдвинулись.

Решение: задать прозрачную рамку заранее и на наведении менять только цвет. Высота в обоих состояниях остаётся 42px.

.btn {
  border: 2px solid transparent;
}
.btn:hover {
  border-color: #2563eb;
}

Двойные линии в таблице

Если дать рамку и таблице, и ячейкам, между ячейками появятся две линии с зазором. Это режим border-collapse: separate, он стоит по умолчанию.

Решение: border-collapse: collapse на теге table, и соседние рамки сольются в одну (справка: MDN о border-collapse). Как собрать саму таблицу, показано в статье таблица в HTML.

border: none или border: 0

Обе записи убирают рамку: в Chrome у обеих ширина 0px и стиль none. Выбирайте любую, но одну на весь проект, чтобы код читался одинаково.

Где освоить CSS системно

Рамки, отступы и скругления относятся к первому слою вёрстки. Дальше идут flexbox и grid, адаптивность через медиа-запросы, анимации и работа с макетом из Figma. Чем занимается человек, который верстает сайты за деньги, описано в обзоре профессии HTML-верстальщика.

Если хочется пройти CSS по порядку и с проверкой домашних заданий, посмотрите курсы по CSS в нашем каталоге. Ниже пять программ из этого раздела.

Курс	Школа	Стоимость со скидкой	В рассрочку	Длитель­ность	Обзор курса от Checkroi
HTML и CSS с нуля Перейти на сайт курса	Skillbox	91 626 ₽	7635 ₽/мес.	11 месяцев	Обзор курса
HTML и CSS. Адаптивная вёрстка и автоматизация Перейти на сайт курса	HTML Academy	23 400 ₽	3900 ₽/мес.	2 месяца	Обзор курса
Основы вёрстки HTML и CSS Перейти на сайт курса	Академия Синергия	32 676 ₽	2723 ₽/мес.	3 месяца	Обзор курса
HTML и CSS с нуля	Skypro	195 160 ₽	7972 ₽/мес.	12 месяцев	Обзор курса
Онлайн-курс Вёрстка на HTML и CSS Перейти на сайт курса	Бруноям	36 900 ₽	2491 ₽/мес.	3 месяца	Обзор курса

• 

  HTML и CSS с нуля

  Skillbox91 626 ₽7635 ₽/мес11 месяцев
  Перейти на сайт курсаОбзор
• 

  HTML и CSS. Адаптивная вёрстка и автоматизация

  HTML Academy23 400 ₽3900 ₽/мес2 месяца
  Перейти на сайт курсаОбзор
• 

  Основы вёрстки HTML и CSS

  Академия Синергия32 676 ₽2723 ₽/мес3 месяца
  Перейти на сайт курсаОбзор
• 

  HTML и CSS с нуля

  Skypro195 160 ₽7972 ₽/мес12 месяцев
  Обзор
• 

  Онлайн-курс Вёрстка на HTML и CSS

  Бруноям36 900 ₽2491 ₽/мес3 месяца
  Перейти на сайт курсаОбзор

Больше программ — в полном каталоге курсов по CSS