Borders use physical properties.
Borders use logical properties.
.box { writing-mode: horizontal-tb; direction: ltr; } .physical { border-top: 2px solid hotpink; border-right-style: dotted; border-right-color: goldenrod; border-right-width: 5px; border-bottom: 4px double black; border-left: none; } .logical { border-block-start: 2px solid hotpink; border-inline-end-style: dotted; border-inline-end-color: goldenrod; border-inline-end-width: 5px; border-block-end: 4px double black; border-inline-start: none; }
<div class="container"> <div class="physical box"> Borders use physical properties. </div> <div class="logical box"> Borders use logical properties. </div> </div>