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.

A mix of values and lengths

HTML

<p>
    one value: 6px wide border on all 4 sides</p>
<p>
    two different values: 2px wide top and bottom border, 10px wide right and left border</p>
<p>
    three different values: 0. 3em top, 9px bottom, and zero width right and left</p>
<p>
    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	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’ в этой спецификации.	Рекомендация

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Как ограничить длину границы с помощью CSS

Иногда у вас могут возникнуть трудности, когда вам нужно сделать границу короче, чем ее родительский элемент. Чтобы преодолеть это, используйте свойства CSS и элементы HTML. Нам нужно будет использовать свойства границ и некоторые элементы, такие как ,

 <дел>
  <дел>

• Стилизуйте
  с помощью идентификатора «box», используя свойства высоты, ширины и фона. Установите положение «относительно» и укажите свойство border-bottom. Это будет родительский div. Мы хотим, чтобы нижняя граница этого div отображалась полностью, а левая граница — только его нижняя половина.
• Стиль
  с идентификатором “borderLeft”, указав его свойство border-left. Установите позицию на «абсолютную» и добавьте свойства top и bottom. Это дочерний div. Показывая границу этого div, мы делаем границу ограниченной длины родительского div.

 #коробка {
  высота: 70 пикселей;
  ширина: 70 пикселей;
  положение: родственник;
  нижняя граница: 2px сплошная #0004ff;
  фон: #cccaca;
}
#borderLeft {
  граница слева: 2px сплошная #0004ff;
  положение: абсолютное;
  верх: 50%;
  внизу: 0;
} 

Давайте посмотрим на результат нашего кода.

Пример ограничения левой границы:

 

  <голова>
    
    <стиль>
      #коробка {
        высота: 70 пикселей;
        ширина: 70 пикселей;
        положение: родственник;
        нижняя граница: 2px сплошная #0004ff;
        фон: #cccaca;
      }
      #borderLeft {
        граница слева: 2px сплошная #0004ff;
        положение: абсолютное;
        верх: 50%;
        внизу: 0;
      }
    
  
  <тело>
    <дел>
      <дел>