border

Редактировать
Дополнительно
- История
- Распечатать эту статью

Перейти к:

Синтаксис
Примеры
Спецификация
Совместимость браузеров
Также смотрите

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

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

border: 1px;
border: 2px dotted;
border: medium dashed green;

Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width, border-style, и border-color принимают до четырех значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

Синтаксис

Свойство border указывается используя одно или более значений <br-width>, <br-style>, и <color> указанных ниже.

Значения

<br-width>: Толщина границ. По умолчанию medium если отсутствует. Больше информации border-width.
<br-style>: Стиль линии границ. По умолчанию none если отсутствует. Больше информации border-style.
<color>: Цвет границ. По умолчанию принимает значение свойства элементов color. Больше информации border-color.

Обычный синтаксис

<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()> | <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>? )
где 
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Примеры

HTML

<div class="fun-border">Look at my borders.</div>
<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
<style contenteditable>
  .fun-border {
    border: 2px solid red;
  }
</style>

CSS

style {
  display: block;
  border: 1px dashed black;
}

Результат

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

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3 Определение 'border' в этой спецификации.	Кандидат в рекомендации	Убирает особую поддержку для `transparent`, так как сейчас принимается как значение `<color>`; это не имеет практического воздействия. Хотя нельзя установить пользовательское значение через универсальное свойство, `border` сейчас сбрасывает `border-image` до начального значения (`none`).
CSS Level 2 (Revision 1) Определение 'border' в этой спецификации.	Рекомендация	Принимает ключевое слово `inherit`. Так же принимает `transparent` как действующий цвет.
CSS Level 1 Определение 'border' в этой спецификации.	Рекомендация	Начальное определение.

Начальное значение	как и у каждого из подсвойств этого свойства: `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`: вычисленный цвет
Animation type	как и у каждого из подсвойств этого свойства: `border-color`: как и у каждого из подсвойств этого свойства: `border-bottom-color`: цвет `border-left-color`: цвет `border-right-color`: цвет `border-top-color`: цвет `border-style`: discrete `border-width`: как и у каждого из подсвойств этого свойства: `border-bottom-width`: длина `border-left-width`: длина `border-right-width`: длина `border-top-width`: длина
Канонический порядок	порядок появления в формальной грамматике значений

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

Update compatibility data on GitHub

	Компьютеры						Мобильные
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome для Android	Firefox для Android	Opera для Android	Safari on iOS	Samsung Internet
`border`	Chrome Полная поддержка 1	Edge Полная поддержка 12	Firefox Полная поддержка 1	IE Полная поддержка 4	Opera Полная поддержка 3.5	Safari Полная поддержка 1	WebView Android ?	Chrome Android ?	Firefox Android Полная поддержка 4	Opera Android ?	Safari iOS Полная поддержка 1	Samsung Internet Android ?

Легенда

Полная поддержка: Полная поддержка
Совместимость неизвестна: Совместимость неизвестна

Также смотрите

border-radius-related CSS properties: border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius

Метки документа и участники

Метки:

Внесли вклад в эту страницу: mdnwebdocs-bot, roman-kosov, suvorovib

Обновлялась последний раз: mdnwebdocs-bot, 23 мар. 2019 г., 18:09:48

Связанные темы