vector-effect="non-scaling-stroke"

The border at the bottom of both the divs is a repeated and responsive background made by a simple SVG path, while the remaining borders are defined with CSS.

If you shrink the viewport you can see how the stroke-width of the path scales with the size of the SVG, but if you also set vector-effect="non-scaling-stroke" the stroke is no more dependant on the user's coordinate system and the tickness remains fixed and equal to the remaining edges