Энциклопедия CSS: border

CSS: border

Тематические порталы

Портал CSS • Портал Веб-разработчиков

border — CSS-свойство, которое задаёт границу вокруг элемента. С его помощью можно указать толщину, стиль и цвет линии.

Свойство часто используют для оформления кнопок, карточек, таблиц, изображений, полей формы и других блоков на странице.

Синтаксис

selector {
  border: толщина стиль цвет;
}

Пример:

.box {
  border: 1px solid #999999;
}

В этом случае вокруг элемента появится сплошная серая граница толщиной 1 пиксель.

Составные части

Свойство border является сокращённой записью для трёх параметров:

• border-width — толщина границы;
• border-style — стиль линии;
• border-color — цвет границы.

Пример:

.box {
  border-width: 2px;
  border-style: dashed;
  border-color: #3b82f6;
}

То же самое можно записать короче:

.box {
  border: 2px dashed #3b82f6;
}

Основные стили границы

Чаще всего используются следующие значения border-style:

• solid — сплошная линия;
• dashed — пунктирная линия;
• dotted — линия из точек;
• double — двойная линия;
• none — граница отсутствует.

.solid {
  border: 2px solid #333333;
}

.dashed {
  border: 2px dashed #333333;
}

.dotted {
  border: 2px dotted #333333;
}

Границы отдельных сторон

Границу можно задать только для одной стороны элемента:

• border-top — верхняя граница;
• border-right — правая граница;
• border-bottom — нижняя граница;
• border-left — левая граница.

Пример:

.notice {
  border-left: 4px solid #22c55e;
  padding: 12px;
}

Такой приём часто используют для выделения уведомлений, цитат или важных блоков.

Живой пример

CSS: свойство border

HTMLКопировать

<div class="border-demo"> <div class="box box-solid">border: 2px solid #3b82f6;</div> <div class="box box-dashed">border: 2px dashed #22c55e;</div> <div class="box box-dotted">border: 3px dotted #f97316;</div> <div class="box box-left">border-left: 5px solid #9333ea;</div> </div>

CSSКопировать

.border-demo { font-family: Arial, sans-serif; background: #f7f9fc; border: 1px solid #d6e0ea; padding: 18px; } .border-demo .box { margin-bottom: 14px; padding: 12px 16px; background: #ffffff; color: #1f2937; font-weight: 600; } .border-demo .box-solid { border: 2px solid #3b82f6; } .border-demo .box-dashed { border: 2px dashed #22c55e; } .border-demo .box-dotted { border: 3px dotted #f97316; } .border-demo .box-left { border-left: 5px solid #9333ea; }

РезультатСкачать файлом

border и размер блока

По умолчанию граница увеличивает общий размер элемента. Если у блока задана ширина 300px и граница 2px, фактическая ширина станет больше.

Чтобы ширина элемента включала границу и внутренние отступы, используют box-sizing: border-box;:

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 2px solid #999999;
}

Связанные свойства

Для скругления углов границы используется свойство border-radius:

.button {
  border: 1px solid #3b82f6;
  border-radius: 6px;
}

Если нужно убрать границу, можно указать:

.box {
  border: none;
}

Источники

• MDN Web Docs: border
• W3C: CSS Backgrounds and Borders Module Level 3