border-block

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

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

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

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

С помощью border-block граница нарисуется всегда там, где нужно, вне зависимости от языка 😎

Допустим, мы хотим выделить текст сверху и снизу аккуратными границами. Попробуем сделать это с помощью свойств border-top и border-bottom:

        
          
          div {  border-top: 7px dashed white;  border-bottom: 7px dashed white;}
          div {
  border-top: 7px dashed white;
  border-bottom: 7px dashed white;
}

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

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

        
          
          div {  writing-mode: vertical-rl;}
          div {
  writing-mode: vertical-rl;
}

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

Язык другой, направление письма другое, а границы всё там же — сверху и снизу. Теперь используем правильное свойство border-block и снова понаблюдаем:

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

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

Сейчас всё логично: стиль письма справа налево, и граница справа и слева текста, как мы и хотели. border-block обо всём позаботился!

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

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

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

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

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

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

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