-webkit-border-before

Нестандартный: Эта функция нестандартная и не находится на пути стандартизации. Не используйте её на производственных сайтах, ориентированных на веб: она не будет работать для каждого пользователя. Также могут существовать значительные несовместимости между реализациями, и поведение может измениться в будущем.

Свойство -webkit-border-before CSS — это сокращённое свойство для установки индивидуальных значений свойств границ логического начала блока в одном месте в таблице стилей.

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

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

-webkit-border-before-color
-webkit-border-before-style
-webkit-border-before-width

Синтаксис

/* Border values */
-webkit-border-before: 1px;
-webkit-border-before: 2px dotted;
-webkit-border-before: medium dashed blue;

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

Значения

Одно или несколько из следующих значений в любом порядке:

<'border-width'>: См. border-width
<'border-style'>: См. border-style
<'color'>: См. color

Описание

Свойство -webkit-border-before сопоставляется с физической границей в зависимости от режима написания элемента, направленности и ориентации текста. Оно соответствует свойству border-top, border-right, border-bottom или border-left в зависимости от значений, определённых для writing-mode, direction и text-orientation.

Это относится к -webkit-border-after, -webkit-border-start и -webkit-border-end, которые определяют другие границы элемента.

Стандартный эквивалент этого свойства — border-block-start.

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

Начальное значение	как каждое из свойств сокращённого: `border-width`: как каждое из свойств сокращённого: `border-top-width`: `medium` `border-right-width`: `medium` `border-bottom-width`: `medium` `border-left-width`: `medium` `border-style`: как каждое из свойств сокращённого: `border-top-style`: `none` `border-right-style`: `none` `border-bottom-style`: `none` `border-left-style`: `none` `color`: `canvastext`
Применимо к	всем элементам
Наследуется	да
Проценты	как каждое из свойств сокращённого: `-webkit-border-before-width`: логическая ширина содержащего блока
Вычисленное значение	как каждое из свойств сокращённого: `border-width`: как каждое из свойств сокращённого: `border-bottom-width`: абсолютная длина или `0` если `border-bottom-style` — `none` или `hidden` `border-left-width`: абсолютная длина или `0` если `border-left-style` — `none` или `hidden` `border-right-width`: абсолютная длина или `0` если `border-right-style` — `none` или `hidden` `border-top-width`: абсолютная длина или `0` если `border-top-style` — `none` или `hidden` `border-style`: как каждое из свойств сокращённого: `border-bottom-style`: как указано `border-left-style`: как указано `border-right-style`: как указано `border-top-style`: как указано `color`: вычисленный цвет
Тип анимации	дискретный

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

-webkit-border-before =
  <'border-width'> || <'border-style'> || <color>

Примеры

Применение границы с вертикальным текстом

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  -webkit-border-before: 5px dashed blue;
}

Результат

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

Не входит в состав какого-либо стандарта, но относится к стандартному свойству border-block-start.

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`-webkit-border-before`	8	79	Нет	15	5.1	18	Нет	15	5	1.0	3

См. также

border-block-start
Сопоставленные физические свойства: border-top, border-right, border-bottom и border-left
writing-mode, direction, text-orientation

© 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/-webkit-border-before