CSS свойство `border`

Определение и применение

CSS свойство border позволяет установить все свойства границ в одном объявлении. Разрешается использовать объявление в котором одно из значений отсутствует.

Свойства, которые можно установить:

ширина границы - border-width (medium | thin | thick | length | initial | inherit).
стиль границы - border-style (none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit).
цвет границы - border-color (color | transparent | initial | inherit).

Сокращение border сбрасывает также border-image в начальное значение. Пропущенные составляющие сокращения не сохраняют прежние значения.

Проверьте, как толщина рамки влияет на размеры при разных значениях box-sizing в тренажёре размеров и позиционирования CSS: исследуйте блочную модель и закрепите её в заданиях.

Попробуйте значения border

Меняется рамка со всех сторон. Сравните отсутствие рамки, сплошную, пунктирную и двойную линии.

Значение свойстваborder: 0;border: 3px solid #245a85;border: 8px dashed #b53625;border: 8px double #245a85;

border: 0

HTML и CSS примера

HTML

<div class="demo-target">Рамка элемента</div>

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border: 0;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border: 3px solid #245a85;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border: 8px dashed #b53625;
}

CSS

.demo-target {
  box-sizing: border-box;
  width: 100%;
  max-width: 260px;
  min-height: 150px;
  padding: 24px;
  background: #ffe4bd;
  color: #172c3d;
  font: 18px/1.5 system-ui;
  border: 8px double #245a85;
}

Поддержка браузерами

Спецификация: CSS backgrounds

Поддерживается во всех основных браузерах с 2015 года.

ВсеКомпьютерыМобильные

Совместимостьcss.properties.border
Возможность	Компьютеры					Мобильные
Возможность	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Browser	WebView Android	WebView on iOS
`border`	✓1	✓12	✓1	✓3.5	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`currentColor`	✓1	✓12	✓1.5	✓9.5	✓4	✓18	✓4	✓14	✓3.2	✓1.0	✓37	✓3.2
`dashed`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`dotted`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`double`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`groove`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`hidden`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`inset`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`medium`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`none`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`outset`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`ridge`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`solid`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`thick`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`thin`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
`transparent`	✓1	✓12	✓1	✓15	✓1	✓18	✓4	✓14	✓1	✓1.0	✓4.4	✓1
Ещё 15 значений · поддерживаются везде более 3 летСвернуть

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

CSS

border: <line-width> || <line-style> || <color>;

/* Глобальные значения */
border: initial | inherit | unset | revert | revert-layer;

|| — одно или несколько значений в любом порядке.

JavaScript синтаксис:

JavaScript

element.style.border="2px solid orange";

Начальное значение свойства

Для всех четырёх сторон границы начальные значения одинаковы:

border-width — medium;
border-style — none;
border-color — currentcolor (цвет элемента).

Значения свойства

Значения border
Значение	Описание
`border-width`	Задаёт ширину границы. Начальное значение.
`border-style`	Задаёт стиль границы. Начальное значение.
`border-color`	Задаёт цвет границы. Начальное значение.
`initial`	Устанавливает начальное значение свойства.
`inherit`	Наследует вычисленное значение свойства у родительского элемента.
`unset`	Для ненаследуемого свойства `border` устанавливает его начальное значение.
`revert`	Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS.
`revert-layer`	Сбрасывает значение свойства для текущего слоя каскада `@layer`. Применяется значение из другого слоя по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.

Спецификация

CSS Backgrounds and Borders — спецификация border.

Наследуется

Нет.

Анимируемое

Зависит от составляющих свойств: border-width, border-style, border-color. Числовые значения и цвета могут изменяться плавно; дискретные значения переключаются.

Примеры, попробуйте сами

Толщина, стиль и цвет границы

Измените 4px на 10px, solid на dashed, а затем цвет. Во втором варианте замените dotted на double.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.4 system-ui,
        sans-serif;
    color: #172c3d;
}
.comparison {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 20px;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.sample {
    min-height: 130px;
    padding: 20px;
    background: #eef2f5;
}

index.html