border-width

Summary

CSS-свойство border-width определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства border.

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

Синтаксис

Общий синтаксис (en-US):

border-width = 
<line-width>{1,4} (en-US)

<line-width> =
<length [0,∞]> | (en-US)
thin | (en-US)
medium | (en-US)
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: thin A thin border
      medium A medium border
      thick A thick border 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 ≤ thick inequality 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

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
Определение 'border-width' в этой спецификации.
Кандидат в рекомендации No direct change, the <length> CSS data type extension has an effect on this property.
CSS Level 2 (Revision 1)
Определение 'border-width' в этой спецификации.
Рекомендация Added the constraint that values' meaning must be constant inside a document.
CSS Level 1
Определение 'border-width' в этой спецификации.
Рекомендация

Browser compatibility

BCD tables only load in the browser

See also