border-width
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since июль 2015 г..
Summary
CSS-свойство border-width определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства border.
| Начальное значение | как и у каждого из подсвойств этого свойства:
|
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter. |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:
|
| Animation type | как и у каждого из подсвойств этого свойства: |
Синтаксис
border-width =
<'border-top-width'>{1,4}
<border-top-width> =
<line-width>
<line-width> =
<length [0,∞]> |
thin |
medium |
thick
border-width: ширина /* Одно значение */ border-width: вертикальная горизонтальная /* Два значения */ border-width: верх горизонтальная основание /* Три значения */ border-width: верх право основание лево /* Четыре значения */ border-width: inherit /* Родительское значение */ Values
<br-width>-
Is either a non-negative explicit
<length>value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:thinmediumthick
Примечание: The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the
thin ≤ medium ≤ thickinequality and that the values are constant on a single document. inherit-
Is a keyword indicating that all four values are inherited from their parent's element calculated value.
Examples
A mix of values and lengths
HTML
<p id="sval">one value: 6px wide border on all 4 sides</p> <p id="bival"> two different values: 2px wide top and bottom border, 10px wide right and left border </p> <p id="treval"> three different values: 0.3em top, 9px bottom, and zero width right and left </p> <p id="fourval"> four different values: "thin" top, "medium" right, "thick" bottom, and 1em right </p> CSS
#sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } Result
Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-width |
Совместимость с браузерами
Смотрите также
- The border-related shorthand properties:
border,border-style,border-color - The border-width-related properties:
border-bottom-width,border-left-width,border-right-width,border-top-width