border-inline: рамки вдоль строчных краёв
Border-inline задаёт рамки у начала и конца строчной оси. Свойство удобно для оформления, которое должно следовать направлению письма без отдельных правил для левой и правой стороны.
Назначение
Border-inline задаёт рамки у начала и конца строчной оси. Свойство удобно для оформления, которое должно следовать направлению письма без отдельных правил для левой и правой стороны.
Как это работает
Короткая запись объединяет ширину, стиль и цвет обеих рамок. Для одного края используйте border-inline-start или border-inline-end. В горизонтальном письме смена dir меняет стороны start и end.
Пример
<style>.logical-border{border-inline:1px solid #9fbaa9;padding:1rem}.logical-border strong{display:block;border-inline-start:4px solid #21734a;padding-inline-start:.6rem}</style>
<div class="logical-border"><strong>Важный пункт</strong><p>Начало строки определяется направлением письма.</p></div>Что должно получиться
У контейнера появляются две боковые рамки, у выделенного пункта — акцент только в начале строки. Padding отделяет текст от рамки и не заменяется толщиной самой линии.
Граница применения и частая ошибка
Одна линия не должна быть единственным обозначением ошибки или состояния. При изменении режима письма рамки могут оказаться сверху и снизу. Если дизайн требует именно физической левой границы независимо от языка, выберите физическое свойство осознанно.
Самостоятельная проверка
Добавьте dir="rtl" контейнеру и проверьте акцентную рамку. Затем сравните border-left с border-inline-start. Убедитесь, что отступ тоже задан логически и следует за выбранным краем.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.