border

Скорочення CSS border ("межі") встановлює межі елемента. Воно задає значення властивостей border-width, border-style та border-color.

Спробуйте його в дії

Складові властивості

Ця властивість є скороченим записом наступних властивостей CSS:

Синтаксис

/* стиль */
border: solid;

/* ширина | стиль */
border: 2px dotted;

/* стиль | колір */
border: outset #f33;

/* ширина | стиль | колір */
border: medium dashed green;

/* Глобальні значення */
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) властивостей меж.

Межі та обриси

Межі та обриси – дуже схожі. А проте, обриси відрізняються від меж наступним чином:

  • Обриси ніколи не займають простір, оскільки вони наносяться зовні вмісту елемента.
  • Згідно зі специфікацією, обриси не обов'язково мають прямокутну форму, хоч зазвичай мають саме таку.

Формальне визначення

Початкове значеннятак як і всі інші властивості зі скорочення:
Успадковуєтьсяні
Обчислене значеннятак як і всі інші властивості зі скорочення:

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

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

де
<line-width> = <length> | thin | medium | thick
<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <lab()> | <lch()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

де
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
<lab()> = lab( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <percentage> | <number> | none] [ / [<alpha-value> | none] ]? )
<lch()> = lch( [<percentage> | <number> | none] [ <percentage> | <number> | none] [ <hue> | none] [ / [<alpha-value> | none] ]? )

де
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Приклад

Встановлення рожевих зовнішніх меж

HTML

<div>Я маю межі, обриси, а також тіні рамок! Захопливо, чи не так?</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;
}

Результат

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

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
border
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 4
Opera Full support 3.5
Safari Full support 1
WebView Android Full support 37
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 14
Safari on iOS Full support 1
Samsung Internet Full support 1.0

Дивіться також