MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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 принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы. Это также применяется к ::first-letter.
Наследуетсянет
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeкак и у каждого из подсвойств этого свойства:
Канонический порядокпорядок появления в формальной грамматике значений

Синтаксис

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

Значения

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

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

<br-width> || <br-style> || <color>

где
<br-width> = <length> | thin | medium | thick
<br-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} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <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' в этой спецификации.
Рекомендация Начальное определение.

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

Браузер Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Поддержка 1.0 (Да) 1.0 (1.7 или ранее) 4.0 3.5 1.0 (85)
Браузер Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Поддержка ? (Да) 1.0 (1.9.2) ? ? 1.0

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

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

 Внесли вклад в эту страницу: suvorovib
 Обновлялась последний раз: suvorovib,