Свойство CSS `-webkit-border-before`

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

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

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

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

Синтаксис

/* 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-block-start-width` `border-block-start-style` `border-block-start-color`
Применяется к	всем элементам
Наследуется	нет
Вычисленное значение	как у каждого из свойств короткой записи: `border-block-start-width` `border-block-start-style` `border-block-start-color`
Тип анимации	как у каждого из свойств короткой записи: `border-block-start-width` `border-block-start-style` `border-block-start-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	WebView на iOS
`-webkit-border-before`	8	79	Нет	15	5.1	18	Нет	15	5	1.0	3	5

См. также

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

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