border: толщина, стиль, цвет и как не получить двойные линии (CSS)

Свойство border в CSS позволяет задать рамку вокруг элемента. Оно объединяет три характеристики: толщину (border-width), стиль (border-style) и цвет (border-color).

Синтаксис и базовые варианты записи

Самый компактный вариант — через сокращённую запись:

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

Пример:

.box {
  border: 2px solid red;
}

Это эквивалентно трём отдельным свойствам:

.box {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Можно задавать отдельные стороны:

.box {
  border-top: 1px dashed blue;
  border-right: 3px dotted green;
  border-bottom: 2px solid yellow;
  border-left: 4px double orange;
}

Толщина: border-width

Значения могут быть:

• в единицах длины: 1px, 2em, 1rem, 5% (редко, но допустимо);
• ключевыми словами: thin, medium, thick.

Пример с разными значениями:

<div class="b-thin"></div>
<div class="b-medium"></div>
<div class="b-thick"></div>

.b-thin   { border-width: thin; }
.b-medium { border-width: medium; }
.b-thick  { border-width: thick; }

На практике чаще используют пиксели: 1px, 2px — это предсказуемо и одинаково во всех браузерах.

Стиль: border-style

Самые востребованные значения:

• none — рамка отсутствует (не занимает места);
• solid — сплошная линия;
• dashed — пунктир;
• dotted — точки;
• double — двойная линия (между линиями есть небольшой промежуток).

Пример стилей:

.border-solid  { border: 2px solid #000; }
.border-dashed { border: 2px dashed #000; }
.border-dotted { border: 2px dotted #000; }
.border-double { border: 6px double #000; } /* double требует большей толщины */

Важно: если стиль не задан (или стоит none), то даже при наличии толщины и цвета рамка не отобразится.

Цвет: border-color

Цвет можно задавать любым способом, принятым в CSS:

• названия: red, blue;
• HEX: #ff0000;
• RGB/RGBA: rgb(255, 0, 0), rgba(255, 0, 0, 0.5);
• текущие цвета текста: currentColor — удобно для согласованности с текстом.

Пример:

.box-1 { border: 1px solid red; }
.box-2 { border: 1px solid #333; }
.box-3 { border: 1px solid rgba(0, 128, 255, 0.7); }
.box-4 { color: #fff; border: 1px solid currentColor; } /* рамка под цвет текста */

Как не получить двойные линии: частые причины и решения

Причина 1: смежные элементы с рамками

Если у двух соседних элементов есть рамки, они визуально «складываются» и выглядят как двойная линия.

HTML:

<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

CSS (проблема):

.item {
  border: 1px solid black;
}

Результат: между элементами — две линии по 1px, итого 2px.

Решение 1: убрать рамку у одной стороны (например, у нижней), а у последнего элемента вернуть:

.item {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
}
 
.item:not(:last-child) {
  border-bottom: none;
}

Решение 2: использовать box-shadow вместо нижней рамки для имитации разделителя:

.item {
  border: 1px solid black;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1); /* тонкая тень снизу */
  border-bottom: none; /* убираем реальную линию */
}

Причина 2: border на родителе и на ребёнке одновременно

Когда у родителя и у дочернего элемента есть рамки, визуально может казаться, что линия «удвоилась» или выглядит неаккуратно.

HTML:

<div class="parent">
  <div class="child">Контент</div>
</div>

CSS (проблема):

.parent { border: 1px solid black; }
.child  { border: 1px solid blue; }

Решение: выбрать, где должна быть рамка — либо только у родителя, либо только у ребёнка. Если нужно выделить внутренний блок, рамку лучше оставить у него, а у родителя — убрать.

.parent { /* без border */ }
.child  { border: 1px solid blue; }

Или, если нужна внешняя граница, рамку оставляют у родителя, а у ребёнка убирают:

.parent { border: 1px solid black; }
.child  { /* без border */ }

Причина 3: border-collapse у таблиц

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

HTML:

<table class="bad-table">
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
</table>

CSS (проблема):

.bad-table, .bad-table td {
  border: 1px solid black;
}

Решение: использовать border-collapse: collapse:

.good-table {
  border-collapse: collapse;
}
.good-table td, .good-table th {
  border: 1px solid black;
}

Теперь линии не дублируются на стыках.

Причина 4: border + outline

Иногда разработчики добавляют outline для фокуса, и вместе с border это выглядит как двойная рамка.

CSS (проблема):

button {
  border: 1px solid gray;
}
button:focus {
  outline: 2px solid blue;
}

Решение: либо убрать border при фокусе, либо заменить outline на кастомный стиль (например, box-shadow), либо явно контролировать оба свойства.

Вариант с box-shadow:

button {
  border: 1px solid gray;
  outline: none;
}
button:focus {
  box-shadow: 0 0 0 2px rgba(0,123,255,0.5);
}

Разные значения для сторон

Можно задать разные параметры для каждой стороны:

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

Сокращённая запись для отдельных сторон:

.box {
  border-top: 3px solid black;
  border-right-width: 1px;
  border-right-style: dotted;
  border-right-color: gray;
}

Практический пример: аккуратная карточка без двойных линий

HTML:

<article class="card">
  <h2 class="card-title">Заголовок</h2>
  <p class="card-text">Текст карточки.</p>
</article>

CSS:

.card {
  border: 1px solid #ccc;
  padding: 16px;
}
.card-title {
  margin-top: 0;
  margin-bottom: 8px;
  /* без border, чтобы не было двойных линий */
}
.card-text {
  /* тоже без border */
}

Здесь рамка задана только у контейнера .card, внутренние элементы рамок не имеют — поэтому нет дублирования линий.