The 12×12 source (a 2px ring around a lighter center) is sliced 2/2/2/2, then each region is stretched or tiled to a 12pt border.
round resizes each edge/center tile so a whole number of them fit exactly, with no partial tile at the corner; space keeps every tile at its natural size and inserts equal gaps between them so the first and last still touch the edges — both shown here against a card width the plain 12pt tile size (repeat, above) does not divide evenly.
The painted frame extends past the border box without affecting layout - the dashed guide shows the untouched border box underneath.
border-image-source accepts any <image>, including a gradient - useful for a colored frame with no asset at all.