Задайте ширину, цвет и стиль границы в конце встроенного направления:
div {
border-inline-end:
10px solid pink;
}
Попробуйте сами »
Определение border-inline-end
CSS свойство border-inline-end - это сокращенное название свойств:
CSS свойство
border-inline-end очень похоже на свойства
border-bottom,
border-left,
border-right и
border-top, но свойство
border-inline-end зависит от встроенного направления.
Примечание: Связанные CSS свойства
writing-mode,
text-orientation и
direction определяет направление строки. Это влияет на то, где находятся начало и конец строки, а также на результат CSS свойства border-inline-end. Для страниц на английском языке направление строки - слева направо, а направление блока - сверху вниз.
| Значение по умолчанию: | medium none currentcolor |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.borderInlineEnd="pink dotted 5px" Попробуй |
Поддержка border-inline-end
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| border-inline-end | 69.0 | 79.0 | 41.0 | 12.1 | 56.0 |
Синтаксис border-inline-end
border-inline-end: border-inline-end-width border-inline-end-style border-inline-end-color|initial|inherit;
Значения border-inline-end
| Значение | Описание | Демонстрация |
|---|---|---|
border-inline-end-width |
Определяет ширину границы элемента в конце встроенного направления. Значение по умолчанию равно "medium" | Демо ❯ |
border-inline-end-style |
Определяет стиль границы элемента в конце встроенного направления. Значение по умолчанию равно "none" | Демо ❯ |
border-inline-end-color |
Определяет цвет границы элемента в конце встроенного направления. Значением по умолчанию является текущий цвет границы | Демо ❯ |
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры border-inline-end
Свойство writing-mode
На положение границы в конце встроенного направления влияет CSS свойство writing-mode:
div {
writing-mode: vertical-rl;
border-inline-end:
5px solid blue;
}
Попробуйте сами »
Свойство direction
На положение границ в конце встроенного направления влияет CSS свойство direction:
div {
direction: rtl;
border-inline-end: 5px solid hotpink;
}
Попробуйте сами »
Страницы по теме border-inline-end
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-color свойство: CSS border-inline-start-color свойство
CSS border-bottom-color свойство: CSS border-bottom-color свойство
CSS border-left-color свойство: CSS border-left-color свойство
CSS border-right-color свойство: CSS border-right-color свойство
CSS border-top-color свойство: CSS border-top-color свойство
CSS direction свойство: CSS Direction свойство
CSS text-orientation свойство: CSS text-orientation свойство
CSS writing-mode свойство: CSS writing-mode свойство