border

Baseline Широко распространённый

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Свойство border краткое CSS задаёт границу элемента. Оно устанавливает значения для border-width, border-style и border-color.

Попробовать

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

Это свойство является сокращённым вариантом следующих свойств CSS:

Синтаксис

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

/* Global values */
border: inherit;
border: initial;
border: revert;
border: revert-layer;
border: unset;

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

Примечание: Граница будет невидимой, если не задан её стиль. По умолчанию стиль равен none.

Значения

<line-width>: Задает толщину границы. По умолчанию medium если не указано. См. border-width.
<line-style>: Задает стиль границы. По умолчанию none если не указано. См. border-style.
<color>: Задает цвет границы. По умолчанию currentcolor если не указано. См. border-color.

Описание

Как и все сокращённые свойства, любые пропущенные подсвойства будут установлены в их начальное значение. Важно, что border не может быть использован для указания пользовательского значения для border-image, а вместо этого устанавливает его в начальное значение, т.е. none.

Сокращённое свойство border особенно полезно, когда все четыре границы должны быть одинаковыми. Однако, чтобы сделать их различными, можно использовать полные свойства border-width, border-style и border-color, которые принимают различные значения для каждой стороны. В качестве альтернативы, можно нацеливаться на одну границу за раз с помощью физических (например, border-top) и логических (например, border-block-start) свойств границ.

Границы против контуров

Границы и контуры очень похожи. Однако контуры отличаются от границ следующим образом:

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

Формальное определение

Начальное значение	как каждое из свойств сокращенного свойства: `border-width`: как каждое из свойств сокращенного свойства: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: как каждое из свойств сокращенного свойства: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `border-color`: как каждое из свойств сокращенного свойства: `border-top-color`: `currentcolor` `border-right-color`: `currentcolor` `border-bottom-color`: `currentcolor` `border-left-color`: `currentcolor`
Применяется к	все элементы. Также применяется к `::first-letter`.
Наследуется	нет
Вычисленное значение	как каждое из свойств сокращенного свойства: `border-width`: как каждое из свойств сокращенного свойства: `border-bottom-width`: абсолютная длина или `0` если `border-bottom-style` равно `none` или `hidden` `border-left-width`: абсолютная длина или `0` если `border-left-style` равно `none` или `hidden` `border-right-width`: абсолютная длина или `0` если `border-right-style` равно `none` или `hidden` `border-top-width`: абсолютная длина или `0` если `border-top-style` равно `none` или `hidden` `border-style`: как каждое из свойств сокращенного свойства: `border-bottom-style`: как указано `border-left-style`: как указано `border-right-style`: как указано `border-top-style`: как указано `border-color`: как каждое из свойств сокращенного свойства: `border-bottom-color`: вычисленный цвет `border-left-color`: вычисленный цвет `border-right-color`: вычисленный цвет `border-top-color`: вычисленный цвет
Тип анимации	как каждое из свойств сокращенного свойства: `border-width`: как каждое из свойств сокращенного свойства: `border-bottom-width`: длина `border-left-width`: длина `border-right-width`: длина `border-top-width`: длина `border-style`: дискретный `border-color`: как каждое из свойств сокращенного свойства: `border-bottom-color`: цвет `border-left-color`: цвет `border-right-color`: цвет `border-top-color`: цвет

Формальный синтаксис

border = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset

Примеры

Установка розовой границ с внешним отступом

HTML

<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>

CSS

div {
  border: 0.5rem outset pink;
  outline: 0.5rem solid khaki;
  box-shadow: 0 0 0 2rem skyblue;
  border-radius: 12px;
  font: bold 1rem sans-serif;
  margin: 2rem;
  padding: 1rem;
  outline-offset: 0.5rem;
}

Результат

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

Спецификация
CSS Backgrounds and Borders Module Level 3 # propdef-border

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`border`	1	12	1	3.5	1	18	4	14	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border