Border

Свойства border-* задают границы элемента: ширину, стиль, цвет. Границы являются частью блочной модели и влияют на размеры элемента (при box-sizing: content-box). Поддерживаются логические свойства для RTL-языков и border-image для сложных эффектов.

Зачем нужно

Границы визуально отделяют элементы, создают структуру интерфейса, подчёркивают интерактивные состояния (фокус, выделение). От простых линий до сложных узоров через border-image.

Где используется

  • Карточки, таблицы, формы
  • Разделители секций
  • Интерактивные состояния (focus, selected)
  • Декоративные элементы
  • CSS-арт (треугольники, фигуры)

Предпосылки

Базовый синтаксис

/* Shorthand */
.box {
  border: 2px solid #333;
  /* border: width style color */
}

/* Развёрнуто */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

/* Без границы */
.clean { border: none; }
.clean { border: 0; }

border-style

.solid  { border-style: solid; }   /* ────── */
.dashed { border-style: dashed; }  /* - - - - */
.dotted { border-style: dotted; }  /* . . . . */
.double { border-style: double; }  /* ══════ */
.groove { border-style: groove; }  /* Вдавленная */
.ridge  { border-style: ridge; }   /* Выпуклая */
.inset  { border-style: inset; }   /* Утопленный элемент */
.outset { border-style: outset; }  /* Выступающий элемент */
.none   { border-style: none; }    /* Нет границы */
.hidden { border-style: hidden; }  /* Скрытая (для таблиц) */

Отдельные стороны

.box {
  border-top: 3px solid red;
  border-right: 2px dashed blue;
  border-bottom: 1px dotted green;
  border-left: none;
}

/* Только нижняя граница */
.underline {
  border: none;
  border-bottom: 2px solid #3498db;
}

/* Отдельные свойства сторон */
.box {
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: red;
}

border-image

Изображение или градиент в качестве границы:

/* Градиентная граница */
.gradient-border {
  border: 3px solid transparent;
  border-image: linear-gradient(45deg, #667eea, #764ba2) 1;
}

/* Скруглённая градиентная граница (workaround) */
.rounded-gradient {
  position: relative;
  background: white;
  border-radius: 12px;
}
.rounded-gradient::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  z-index: -1;
}

/* border-image из файла */
.fancy {
  border: 20px solid transparent;
  border-image-source: url("border-pattern.png");
  border-image-slice: 30;
  border-image-repeat: round;
}

border-image не работает с border-radius — границы становятся прямоугольными.

Логические свойства (Logical Properties)

.box {
  /* Физические → Логические */
  border-block-start: 2px solid #333;  /* = border-top (LTR) */
  border-block-end: 2px solid #333;    /* = border-bottom */
  border-inline-start: 2px solid #333; /* = border-left (LTR) */
  border-inline-end: 2px solid #333;   /* = border-right */

  /* Shorthand */
  border-block: 2px solid #333;   /* top + bottom */
  border-inline: 2px solid #333;  /* left + right */
}

Трюк: CSS-треугольники

/* Треугольник через прозрачные границы */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid #333;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 15px solid #333;
}

/* Стрелка тултипа */
.tooltip::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333;
}

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

  1. border: none vs border: 0 — оба работают, но border: 0 сбрасывает ширину, а border: none — стиль

  2. border увеличивает размер при box-sizing: content-box:

    .box { width: 200px; border: 5px solid; }
/* Итого: 210px. Решение: box-sizing: border-box */

  3. border-image + border-radius — не совместимы, радиус игнорируется

  4. Забыт border-style — border-width и border-color без стиля не отображаются:

    .box { border-width: 2px; border-color: red; }
/* Ничего не видно! Нужен border-style: solid */

Практика

  • Стилизовать карточку с разными границами на каждой стороне
  • Создать CSS-треугольник для стрелки тултипа
  • Применить border-image с градиентом
  • Использовать логические свойства border-block, border-inline

Связанные темы

Ресурсы