border-width

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

Общий синтаксис (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 /* Родительское значение */

• <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.

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

• The border-related shorthand properties: border, border-style (en-US), border-color (en-US)
• The border-width-related properties: border-bottom-width (en-US), border-left-width (en-US), border-right-width (en-US), border-top-width (en-US)