border-inline

border-inline is a logical shorthand property. It creates borders for an element along the inline axis.

The block axis is related to the direction of the content flow. Thus, for Russian and English languages, border-inline draws borders on the left and right of the element, while for Japanese, it draws them on the top and bottom.

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

border-inline helps place borders where they need to be, regardless of the language 😎

Let's draw borders using border-left and border-right:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Now, the text will be in Japanese, so let's change the flow and see what happens:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The language is different, the writing direction is different, but the borders remain the same — on the right and left. This is not very good from the perspective of people who speak different languages. Let's try to fix this with the border-inline property:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Now everything is logical: the writing style changed its direction, and the borders changed too. Using the logical property fixed the situation.

border-inline is written just like border, and it also shortens the same properties. The only difference is that border in the notation is replaced with border-inline:

• border-inline-width — width of the border;
• border-inline-style — style of the border;
• border-inline-color — color of the border.

You can style one of the borders separately, similar to border-left and border-right:

• border-inline-start — the first border in the inline axis direction;
• border-inline-end — the second border.

💡 When you need visible borders of a block to be placed in the direction of the block axis, use the border-block property.

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

        
        
          
            
            Copy
            Copied
            Failed to copy