border

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

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

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

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

• border-width (ширина меж)
• border-style (стиль меж)
• border-color (колір меж)

Синтаксис

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

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

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

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

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

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

[!NOTE] Межі будуть невидимими, якщо не вказаний їх стиль. Так виходить, тому що усталений стиль – 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;
}

Результат

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

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

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

• border-width
• border-style
• border-color
• outline
• Фони та межі
• Вивчаймо CSS: Фони та межі