container-lines

Use ::before and ::after pseudo-elements on a layout wrapper, positioned absolutely at the left and right container edges with 1px width and low opacity. Compute the offsets with max() combining container padding and (100vw - max-width) / 2 so lines track the container responsively.

Place small absolutely positioned span elements inside a relative section, sized 4px to 8px, and anchor them to each corner with top/right/bottom/left plus translate(-50%, -50%) style offsets. Use a slightly stronger line color so the squares read as precise markers.

Guide lines block interaction when pointer-events is not disabled on the pseudo-elements or marker elements. Set pointer-events: none on the lines and corner squares, and keep them behind content with a negative z-index inside an isolated stacking context.

Yes, when the line offsets use max() with a fluid padding value like clamp(20px, 4vw, 48px), the lines fall back to the padding edge on narrow screens. Verify enough padding remains between the line and content on small devices.

Avoid them on nested components or every section, since overuse turns structure into noise. They suit page-level or major-section framing, and bright accent colors should be avoided unless the whole visual system is technical or industrial.