CSS border-block-width Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">/* Page styles */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f3f6fb;
  padding: 24px;
  color: #111827;
}

/* Container */
.container {
  max-width: 640px;
  margin: 0 auto;
}

/* Generic box */
.box {
  padding: 12px 16px;
  margin: 16px 0;
  background: #ffffff;
  border-style: solid;            /* required for border widths to show */
  border-color: #2b7cff;
  border-inline-width: 2px;      /* left/right borders */
  border-block-width: 4px;       /* top/bottom borders (block start/end) */
  border-radius: 6px;
}

/* Variations */
.box.one {
  border-block-width: 4px;
}

.box.two {
  border-block-width: 12px;
}

.box.three {
  border-block-width: thick;
}

/* Label */
.label {
  font-weight: 600;
  margin-bottom: 8px;
}
</style></head><body><div class="container">
  <h2>border-block-width examples</h2>
  <div class="box one">
    <div class="label">border-block-width: 4px;</div>
    <p>Top and bottom borders are 4px thick.</p>
  </div>
  <div class="box two">
    <div class="label">border-block-width: 12px;</div>
    <p>Top and bottom borders are 12px thick.</p>
  </div>
  <div class="box three">
    <div class="label">border-block-width: thick;</div>
    <p>Top and bottom borders use the 'thick' keyword.</p>
  </div>
</div></body></html>