border-inline

border-inline — это логическое свойство-шорткат. Оно создаёт у элемента рамки по строчной оси.

Блочная ось связана с направлением потока сайта. Так, для русского и английского языков border-inline рисует границу слева и справа элемента, а для японского сверху и снизу.

        
          
          div {  border-inline: 5px solid white;}
          div {
  border-inline: 5px solid white;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

border-inline помогает располагать границы там, где они должны быть, вне зависимости от языка 😎

Нарисуем границы с помощью border-left и border-right:

        
          
          div {  border-left: 7px dashed white;  border-right: 7px dashed white;}
          div {
  border-left: 7px dashed white;
  border-right: 7px dashed white;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

А теперь текст будет на японском языке, для этого сменим поток и посмотрим, что будет:

        
          
          div {  writing-mode: vertical-rl;  border-left: 7px dashed white;  border-right: 7px dashed white;}
          div {
  writing-mode: vertical-rl;
  border-left: 7px dashed white;
  border-right: 7px dashed white;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Язык другой, направление письма другое, а границы всё там же — справа и слева. Это не очень хорошо с точки зрения людей, которые говорят на разных языках. Попробуем исправить это с помощью свойства border-inline:

        
          
          div {  writing-mode: vertical-rl;  border-inline: 7px dashed white;}
          div {
  writing-mode: vertical-rl;
  border-inline: 7px dashed white;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Сейчас всё логично: стиль письма изменил своё направление и границы тоже поменялись. Использование логического свойства исправило ситуацию.

border-inline пишется так же, как и border, а ещё сокращает такие же свойства. Отличие лишь в том, что border в записи заменяется на border-inline:

• border-inline-width — ширина границы;
• border-inline-style — стиль границы;
• border-inline-color — цвет границы.

Можно отдельно стилизовать одну из границ по аналогии с border-left и border-right:

• border-inline-start — первая граница по направлению строчной оси;
• border-inline-end — вторая граница.

💡 Когда нужно, чтобы видимые границы блока разместились в направлении блочной оси, используйте свойство border-block.

        
          
          div {  border-block: 5px solid white;}
          div {
  border-block: 5px solid white;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать