This page was translated from English by the community.Learn more and join the MDN Web Docs community.
border
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
СвойствоCSSborder этоуниверсальное свойство для указания всех персональных свойств границ за раз:border-width,border-style, иborder-color.
Интерактивный пример
border: solid;border: dashed red;border: 1rem solid;border: thick double #32a1ce;border: 4mm ridge rgba(211, 220, 50, 0.6);<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #8b008b; padding: 0.75em; width: 80%; height: 100px;}Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание,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.
Обычный синтаксис
border =
<line-width>||
<line-style>||
<color>
<line-width> =
<length [0,∞]>|
thin|
medium|
thick
<line-style> =
none|
hidden|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset
Примеры
HTML
<div>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 |
|---|
| CSS Backgrounds and Borders Module Level 3 # propdef-border |
| Начальное значение | как и у каждого из подсвойств этого свойства:
|
|---|---|
| Применяется к | все элементы. Это также применяется к::first-letter. |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:
|
| Animation type | как и у каждого из подсвойств этого свойства:
|