CSS stroke-linejoin Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.examples {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 20px;
  background: #f7f7f7;
}

svg {
  width: 160px;
  height: 140px;
  background: #ffffff;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

polyline {
  fill: none;
  stroke: #1e88e5;
  stroke-width: 14;
  stroke-linecap: butt;
}

.miter polyline {
  stroke-linejoin: miter;
  stroke-miterlimit: 4;
}

.round polyline {
  stroke-linejoin: round;
}

.bevel polyline {
  stroke-linejoin: bevel;
}

text {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-size: 12px;
  fill: #333;
}
</style></head><body><div class='examples'>
  <svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' class='miter'>
    <polyline points='10,90 50,10 90,90' />
    <text x='10' y='98'>miter</text>
  </svg>

  <svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' class='round'>
    <polyline points='10,90 50,10 90,90' />
    <text x='10' y='98'>round</text>
  </svg>

  <svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' class='bevel'>
    <polyline points='10,90 50,10 90,90' />
    <text x='10' y='98'>bevel</text>
  </svg>
</div></body></html>