Свойство CSS `border-width`

Сокращённое свойство border-width CSS задаёт ширину границы элемента.

Попробуйте

border-width: thick;

border-width: 1em;

border-width: 4px 1.25em;

border-width: 2ex 1.25ex 0.5ex;

border-width: 0 4px 8px 12px;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with a border around it.
  </div>
</section>

#example-element {
  background-color: palegreen;
  color: black;
  border: 0 solid crimson;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Составные свойства

Это свойство является сокращённой записью следующих свойств CSS:

• border-bottom-width
• border-left-width
• border-right-width
• border-top-width

Синтаксис

/* Keyword values */
border-width: thin;
border-width: medium;
border-width: thick;

/* <length> values */
border-width: 4px;
border-width: 1.2rem;

/* top and bottom | left and right */
border-width: 2px 1.5em;

/* top | left and right | bottom */
border-width: 1px 2em 1.5cm;

/* top | right | bottom | left */
border-width: 1px 2em 0 4rem;

/* Global values */
border-width: inherit;
border-width: initial;
border-width: revert;
border-width: revert-layer;
border-width: unset;

Свойство border-width можно задать одним, двумя, тремя или четырьмя значениями.

• Если задано одно значение, оно задаёт одинаковую ширину для всех четырёх сторон.
• Если заданы два значения, первое задаёт ширину для верхней и нижней сторон, второе — для левой и правой.
• Если заданы три значения, первое задаёт ширину для верхней стороны, второе — для левой и правой, третье — для нижней.
• Если заданы четыре значения, они задают ширину для верхней, правой, нижней и левой сторон в этом порядке (по часовой стрелке).

Значения

<line-width>

Задаёт ширину границы в виде явно указанного неотрицательного значения <length> или одного из ключевых слов: thin, medium или thick. Значение по умолчанию — medium.

Формальное определение

Формальный синтаксис

border-width = 
  <line-width>{1,4}

<line-width> = 
  <length> |
  thin |
  medium |
  thick

Примеры

Сочетание значений и длин

HTML

<p id="one-value">one value: 6px wide border on all 4 sides</p>
<p id="two-values">
  two different values: 2px wide top and bottom border, 10px wide right and left
  border
</p>
<p id="three-values">
  three different values: 0.3em top, 9px bottom, and zero width right and left
</p>
<p id="four-values">
  four different values: "thin" top, "medium" right, "thick" bottom, and 1em
  left
</p>

CSS

#one-value {
  border: ridge #cccccc;
  border-width: 6px;
}
#two-values {
  border: solid red;
  border-width: 2px 10px;
}
#three-values {
  border: dotted orange;
  border-width: 0.3em 0 9px;
}
#four-values {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}
p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• Сокращённые свойства, связанные с границами: border, border-style, border-color
• Свойства, связанные с шириной границ: border-bottom-width, border-left-width, border-right-width, border-top-width