CSS stroke-miterlimit Property - Playground Example

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

.wrapper {
  max-width: 520px;
}

.demo {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  border: 1px solid #e6eef8;
  border-radius: 8px;
  padding: 12px;
}

/* common stroke settings */
.miter-large,
.miter-small {
  fill: none;
  stroke-width: 14;
  stroke-linejoin: miter;
}

.miter-large {
  stroke: #1e90ff;
  stroke-miterlimit: 10; /* large miterlimit preserves sharp corner */
}

.miter-small {
  stroke: #ff4d4f;
  stroke-miterlimit: 1; /* small miterlimit forces bevel */
}

.reference {
  stroke: rgba(0,0,0,0.08);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
}

.legend {
  margin: 8px 0 0 0;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.swatch {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.06);
}

.swatch.miter-large { background: #1e90ff; }
.swatch.miter-small { background: #ff4d4f; }
</style></head><body><div class='wrapper'>
  <h2>stroke-miterlimit demo</h2>
  <svg viewBox='0 0 260 130' xmlns='http://www.w3.org/2000/svg' class='demo'>
    <g transform='translate(10,10)'>
      <!-- sharp miter (high miterlimit) -->
      <path d='M10 10 L70 10 L80 50' class='miter-large' />

      <!-- bevelled corner (low miterlimit) -->
      <path d='M10 70 L70 70 L80 110' class='miter-small' />

      <!-- helper grid -->
      <line x1='0' y1='0' x2='240' y2='120' class='reference' />
    </g>
  </svg>

  <p class='legend'>
    <span class='swatch miter-large'></span>
    stroke-miterlimit: 10  -  sharp corner kept
  </p>

  <p class='legend'>
    <span class='swatch miter-small'></span>
    stroke-miterlimit: 1  -  bevel applied
  </p>
</div></body></html>