CSS border-inline-start-style свойство

Определение и использование

border-inline-start-style устанавливают стиль рамки элемента в начале строкового направления.

свойствами CSS border-inline-start-style Свойства связаны с border-bottom-style、border-left-style、border-right-style и border-top-style Свойства очень похожи, но border-inline-start-style Свойства зависят от направления в строке.

Внимание:Соответствующие свойства CSS writing-mode、text-orientation и direction Определяет инлайн-направление. Это влияет на начало и конец строки, а также border-inline-start-style Результат атрибута. Для английских страниц инлайн-направление слева направо, блоковое направление вниз.

Пример

Пример 1

Установить стиль края в начале инлайн-направления:

div {
  border-inline-start-style: dotted;
}

Попробуйте сами

Пример 2: сочетание с атрибутом writing-mode

Положение края в начале инлайн-направления зависит от: writing-mode Влияние атрибута:

div {
  writing-mode: vertical-rl;
  border-inline-start-style: dotted;
}

Попробуйте сами

Пример 3: сочетание с атрибутом direction

Положение края в начале и конце инлайн-направления зависит от: direction Влияние атрибута:

div {
  direction: rtl;
  border-inline-start-style: dotted;
}

Попробуйте сами

CSS синтаксис

border-inline-start-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Значение атрибута

Значение Описание
none Значение по умолчанию. Определить без края.
hidden Так же, как и none, но по-другому обрабатывается в конфликте краев таблицы.
dotted Определить точечный край.
dashed Определить пунктирный край.
solid Определить сплошной край.
double Определить двойной край.
groove

Определить 3D вогнутый край.

Эффект зависит от значения border-color.
ridge

Определить 3D выпуклый край.

Эффект зависит от значения border-color.
inset

Определить 3D вогнутый край.

Эффект зависит от значения border-color.
outset

Определить 3D выпуклый край.

Эффект зависит от значения border-color.
initial Установить этот атрибут в его значение по умолчанию. См. также: initial.
inherit Ингеритация этого атрибута из родительского элемента. См. также: inherit.

Технические детали

Значение по умолчанию: none
Ингеритация: Нет
Создание анимации: Не поддерживается. См. также:Атрибуты анимации.
Версия: CSS3
JavaScript синтаксис: object.style.borderInlineStartStyle="dotted"

Поддержка браузеров

Числа в таблице показывают версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
69.0 79.0 41.0 12.1 56.0

См. также:

Учебное пособие:Обрамление в CSS

См. также:Свойство border CSS

См. также:Свойство border-inline CSS

См. также:Свойство border-inline-end-style CSS

См. также:CSS border-inline-start-style свойство

См. также:Свойство border-bottom-style CSS

См. также:CSS border-left-style свойство

См. также:CSS border-right-style свойство

См. также:CSS border-top-style свойство

См. также:Свойство direction в CSS

См. также:Свойство text-orientation в CSS

См. также:Свойство writing-mode в CSS