paint-order lets you control the order in which the fill and stroke (and markers) of text content and shapes are drawn. The default order is fill, stroke, markers.
By default, a stroke is applied on the 'center' of the border. Given a 10px square and a 4px border, the total width will equal 12px, with the inner square occupying 8px. This is due to the 4px border having 2px on the 'inside' and 2px on the 'outside'.
Switching the order to stroke first allows you to create an 'outer border'. Given the same measurements with paint-order: stroke, the fill will be painted after the stroke. This still results in a 12px shape - 10px for the square, with a 2px stroke (2px is hidden behind the fill).
To create an 'inner border', a technique using a clip path can be used.
As of now, there is no property on where to draw the stroke, such as stroke-location.
https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order https://stackoverflow.com/questions/57007869/stroke-svg-path-only-inside-or-only-outside https://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn