CSS border-block-start-width Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Basic layout */
.wrap {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px;
  background: #fffdf6;
}

/* Card styles demonstrating border-block-start-width */
.card {
  width: 260px;
  padding: 16px;
  border-block-start-width: 8px;
  border-block-start-style: solid;
  border-block-start-color: #2b7a78;
  border-radius: 6px;
  background: #f7fff7;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.card h2 {
  margin: 0 0 8px 0;
  font-size: 1rem;
}

.card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Vertical writing mode example: block-start becomes the left side in vertical-rl */
.card.vertical {
  writing-mode: vertical-rl;
  height: 180px;
  width: 140px;
}
</style></head><body><div class="wrap">
  <div class="card">
    <h2>Card Title</h2>
    <p>This box uses <code>border-block-start-width</code>.</p>
  </div>
  <div class="card vertical">
    <h2>Vertical</h2>
    <p>Writing mode <code>vertical-rl</code>  -  block start appears on the left.</p>
  </div>
</div></body></html>