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

Базовая поддержка Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и во многих версиях браузеров. Она доступна во всех браузерах с апреля 2017 года.

Свойство outline-width языка CSS задаёт толщину контура элемента. Контур — это линия, которая рисуется вокруг элемента за пределами border.

При задании внешнего вида контура часто удобнее использовать сокращённое свойство outline.

Попробуйте

outline-width: 12px;

outline-width: thin;

outline-width: medium;

outline-width: thick;

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

#example-element {
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Синтаксис

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

/* <length> values */
outline-width: 1px;
outline-width: 0.1em;

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

Значения

Это свойство задаётся одним значением <line-width>.

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

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

Исходное значение	medium
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	абсолютное `<length>`, округлённое до ширины линии
Тип анимации	a <a href="/en-US/docs/Web/CSS/Reference/Values/length#interpolation" title="Значения CSS-типа данных <length> интерполируются как действительные числа с плавающей запятой.">length</a>

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

outline-width = 
  <line-width>

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

Примеры

Задание ширины контура элемента

HTML

<span id="thin">thin</span>
<span id="medium">medium</span>
<span id="thick">thick</span>
<span id="twopixels">2px</span>
<span id="oneex">1ex</span>
<span id="em">1.2em</span>

CSS

span {
  outline-style: solid;
  display: inline-block;
  margin: 20px;
}

#thin {
  outline-width: thin;
}

#medium {
  outline-width: medium;
}

#thick {
  outline-width: thick;
}

#twopixels {
  outline-width: 2px;
}

#oneex {
  outline-width: 1ex;
}

#em {
  outline-width: 1.2em;
}

Результат

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

Спецификация
Модуль базового пользовательского интерфейса CSS уровня 4 # outline-width

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

	Настольные					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome для Android	Firefox для Android	Opera для Android	Safari на iOS	Samsung Internet	WebView для Android	WebView на iOS
`outline-width`	1	12	1.5 До Firefox 88 контур не повторяет форму `border-radius`. 1–3.6	7	1.2	18	4 До Firefox для Android 88 контур не повторяет форму `border-radius`.	14	1	1.0	4.4	1
`medium`	1	12	1	15	1.2	18	4	14	1	1.0	4.4	1
`thick`	1	12	1	15	1.2	18	4	14	1	1.0	4.4	1
`thin`	1	12	1	15	1.2	18	4	14	1	1.0	4.4	1

См. также

© 2005–2025 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/outline-width