How to design "overflowing" border lines of css <div>?
<p>Just getting into css and, though trying different approaches, I don't manage to design a content box with the borders I have in mind. It should look something like this:</p>

<p><img src="https://i.stack.imgur.com/dvQ2l.png" alt="Box as desired"></p>

<p>In words: The borders should cross each other and continue for some maybe 30px, maybe we can call it overflow. Resulting in crosses at all four edges.</p>

<p>I have tried to design small cubic boxes each at every edge, and it kinda works. But I find it very hard to include them in my concept of responsiveness, as they don't shrink at the same rate that the actual box (lets call it <code>&lt;box&gt;</code>) does. The <code>&lt;box&gt;</code> has side margins in percent, so when the page is being scaled down, the small boxes <code>&lt;sbox&gt;</code> are in my way and preventing the margins of <code>&lt;box&gt;</code> from reaching out all the way to the frames borders.</p>

<p>Any ideas on how to make that one more elegant?</p>