border-block-start-color

border-block-start-color: red;
writing-mode: horizontal-tb;

border-block-start-color: #32a1ce;
writing-mode: vertical-rl;

border-block-start-color: rgb(170, 50, 220, 0.6);
writing-mode: horizontal-tb;

border-block-start-color: hsl(60, 90%, 50%, 0.8);
writing-mode: vertical-lr;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    これは周囲に境界線があるボックスです。
  </div>
</section>

#example-element {
  background-color: #eee;
  color: #000;
  border: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
  unicode-bidi: bidi-override;
}

border-block-start-color: blue;
border-block-start-color: #4c5d21;
/* グローバル値 */
border-block-start-color: inherit;
border-block-start-color: initial;
border-block-start-color: revert;
border-block-start-color: revert-layer;
border-block-start-color: unset;

<div>
  <p class="exampleText">テキストの例</p>
</div>

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}
.exampleText {
  writing-mode: vertical-lr;
  border: 10px solid blue;
  border-block-start-color: red;
}