outline-width

Baseline Широко доступно

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

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

Попробуйте

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

Синтаксис

/* 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;

Свойство outline-width задаётся одним из значений, перечисленных ниже.

Значения

<length>: Ширина внешней рамки, заданная как <length>.
thin: Зависит от пользовательского агента. Обычно эквивалентно 1px в браузерах для настольных компьютеров (включая Firefox).
medium: Зависит от пользовательского агента. Обычно эквивалентно 3px в браузерах для настольных компьютеров (включая Firefox).
thick: Зависит от пользовательского агента. Обычно эквивалентно 5px в браузерах для настольных компьютеров (включая Firefox).

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

Начальное значение	`medium`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	абсолютная длина; если указано ключевое слово `none`, вычисленное значение равно `0`
Тип анимации	длина

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

outline-width = 
  <line-width>  

<line-width> = 
  <length [0,∞]>  |
  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 Basic User Interface Module Level 4 # outline-width

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`outline-width`	1	12	1.5 До Firefox 88 внешняя рамка не следует форме `border-radius`. 1–3.6	7	1.2	18	4 До Firefox 88 внешняя рамка не следует форме `border-radius`.	14	1	1.0	37

См. также

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