Dotted Lines

border-style: dashed lets you set thickness - but dash length and gap size are decided by the browser, and there's no CSS property to override them.

The fix: build the line from a gradient

Replace the border with a 1px-tall element whose background is a repeating-linear-gradient. The gradient tiles a segment that is exactly --dot + --gap wide: the first --dot pixels are colored, the remaining --gap pixels are transparent. Because both stops are in absolute px units, dot and gap are fully independent:

background: repeating-linear-gradient(
  to right,
  var(--color) 0, var(--color) var(--dot),
  transparent var(--dot),
  transparent calc(var(--dot) + var(--gap))
);

The same pattern works vertically - change to right to to bottom and make the element 1px wide with full height instead.