Border Inline with writing mode

Alternative to border left + text

by George Y

HTML

<div class="box box-1">
  Η προσφορά ισχύει μόνο για μέλη του προγράμματος επιβράβευσης "AVIN Κερδίζω" της AVIN. Δες περισσότερα εδώ.
  (Horizontal-tp)
</div>
<div class="box box-2">
  Vertical-lr
</div>

CSS

body {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3em;
  padding: 3em;
}

.box {
  display: flex;
  flex-basis: 50%;
  height: auto;
  padding:8px;
}

.box-1{
  border-inline: 2px solid #3894f8;
  writing-mode: horizontal-tb;
  border-inline-end-style: hidden;
}

.box-2{
  border-inline: 2px solid #3894f8;
  writing-mode: vertical-lr;
}