border-inline

Создаёт рамки элементу по строчной оси.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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;
}

        
        
          
        
      
Открыть демо в новой вкладке