Установите стиль для границы в конце в направлении inline:
div {
border-inline-end-style: dotted;
}
Попробуйте сами »
Определение border-inline-end-style
CSS свойство border-inline-end-style определяет стиль границы элемента в конце в направлении inline.
CSS свойство
border-inline-end-style очень похоже на свойства
border-bottom-style,
border-left-style,
border-right-style и
border-top-style, но свойство
border-inline-end-style зависит от встроенного направления.
Примечание: Связанные CSS свойства
writing-mode,
text-orientation и
direction определяет направление строки. Это влияет на то, где находятся начало и конец строки, а также на результат CSS свойства border-inline-end-style. Для страниц на английском языке направление строки - слева направо, а направление блока - вниз.
| Значение по умолчанию: | none |
|---|---|
| Унаследовано: | no |
| Анимируемый: | no. Читайте о animatable |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderInlineEndStyle="dotted" Попробуй |
Поддержка border-inline-end-style
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-inline-end-style | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
Синтаксис border-inline-end-style
border-inline-end-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Значения border-inline-end-style
| Значение | Описание | Демонстрация |
|---|---|---|
| none | Значение по умолчанию. Не определяет границы | Демо ❯ |
| hidden | То же, что и "none", за исключением разрешения пограничных конфликтов для элементов таблицы | Демо ❯ |
| dotted | Определяет пунктирную границу | Демо ❯ |
| dashed | Определяет пунктирную границу | Демо ❯ |
| solid | Определяет сплошную границу | Демо ❯ |
| double | Определяет двойную границу | Демо ❯ |
| groove | Определяет трехмерную рифленую границу. Эффект зависит от значения цвета границы | Демо ❯ |
| rigde | Определяет трехмерную ребристую границу. Эффект зависит от значения border-color | Демо ❯ |
| inset | Определяет границу трехмерной вставки. Эффект зависит от значения border-color | Демо ❯ |
| outset | Определяет трехмерную начальную границу. Эффект зависит от значения border-colore | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-inline-end-style
Свойство writing-mode
На положение границы в конце в линейном направлении влияет CSS свойство writing-mode:
div {
writing-mode: vertical-rl;
border-inline-end-style: dotted;
}
Попробуйте сами »
Свойство direction
На положение границ в начале и конце в линейном направлении влияет CSS свойство direction свойство:
div {
direction: rtl;
border-inline-end-style: dotted;
}
Попробуйте сами »
Страницы по теме border-inline-end-style
CSS Учебник: CSS Границы
CSS border свойство: CSS border свойство
CSS border-inline свойство: CSS border-inline свойство
CSS border-inline-end-style свойство: CSS border-inline-end-style свойство
CSS border-inline-start-style свойство: CSS border-inline-start-style свойство
CSS border-bottom-style свойство: CSS border-bottom-style свойство
CSS border-left-style свойство: CSS border-left-style свойство
CSS border-right-style свойство: CSS border-right-style свойство
CSS border-top-style свойство: CSS border-top-style свойство
CSS direction свойство: CSS Direction свойство
CSS text-orientation свойство: CSS text-orientation свойство
CSS writing-mode свойство: CSS writing-mode свойство