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' в этой спецификации.		 Рекомендация Начальное определение.
Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы. Это также применяется к ::first-letter.
Наследуетсянет
Отображениевизуальный
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeкак и у каждого из подсвойств этого свойства:
Канонический порядокпорядок появления в формальной грамматике значений

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
borderChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка ≤37Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android ? Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

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

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

Связанные темы
  1. CSS
  2. CSS документация
  3. CSS Backgrounds and Borders
  4. Руководства
    1. Resizing background images with background-size [Перевести]
    2. Using multiple backgrounds [Перевести]
  5. Свойства
    1. background
    2. background-attachment
    3. background-clip
    4. background-color
    5. background-image
    6. background-origin
    7. background-position
    8. background-position-x
    9. background-position-y [Перевести]
    10. background-repeat
    11. background-size
    12. border
    13. border-bottom [Перевести]
    14. border-bottom-color [Перевести]
    15. border-bottom-left-radius [Перевести]
    16. border-bottom-right-radius [Перевести]
    17. border-bottom-style [Перевести]
    18. border-bottom-width [Перевести]
    19. border-color [Перевести]
    20. border-image [Перевести]
    21. border-image-outset
    22. border-image-repeat
    23. border-image-slice
    24. border-image-source
    25. border-image-width
    26. border-left [Перевести]
    27. border-left-color [Перевести]
    28. border-left-style [Перевести]
    29. border-left-width [Перевести]
    30. border-radius
    31. border-right [Перевести]
    32. border-right-color [Перевести]
    33. border-right-style [Перевести]
    34. border-right-width [Перевести]
    35. border-style [Перевести]
    36. border-top [Перевести]
    37. border-top-color [Перевести]
    38. border-top-left-radius [Перевести]
    39. border-top-right-radius [Перевести]
    40. border-top-style [Перевести]
    41. border-top-width [Перевести]
    42. border-width
    43. box-shadow