How to design "overflowing" border lines of css <div>? - html

Question

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:
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.
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 <box>) does. The <box> has side margins in percent, so when the page is being scaled down, the small boxes <sbox> are in my way and preventing the margins of <box> from reaching out all the way to the frames borders.
Any ideas on how to make that one more elegant?

Answer 1

You can do this using the help of before and after pseudo classes.
* { box-sizing:border-box; }
.box { padding:20px; width:100px; height:100px; position:relative; border-left:2px solid #000; border-right:2px solid #000; }
.box::after { position:absolute; top:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
.box::before { position:absolute; bottom:5px; left:-7px; background:#000; width:110px; height:2px; content:"";}
<div class="box">
Content
</div>
Demo

Answer 2

An example without pseudo classes
.outer{
height: 1em;
margin: 0 1em 0 1em;
}
.content{
border: 1px solid #000;
border-left: none;
border-right: none;
}
.innerContent{
margin: 0 1em 0 1em;
}
.borderLeftRight{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
<div class="outer borderLeftRight"></div>
<div class="content">
<div class="innerContent borderLeftRight">
Content
</div>
</div>
<div class="outer borderLeftRight"></div>

Answer 3

Somebody already did something similar. I think the most elegant way is with pseudo selectors :before & :after. I feel you should do it in this way and not with wrappers. Most important things are setting your element's position to relative and then before and after selectors position to absolute. Then fiddle with border and top, bottom, left, right properties.
.box {
display: inline-block;
position: relative;
padding: 2em;
}
.box:after,
.box:before {
position: absolute;
content: "";
}
.box:after {
border-top: 1px solid #f00;
border-bottom: 1px solid #f00;
left: 0;
right: 0;
top: 1em;
bottom: 1em;
}
.box:before {
border-left: 1px solid #f00;
border-right: 1px solid #f00;
left: 1em;
right: 1em;
top: 0;
bottom: 0;
}
<div class="box">
text inside
</div>

Answer 4

Just going to put this up here to show you can do this using a single pseudo element.
Fixed width
You will have to set the width and height for it, can get around this using calc but its support isn't amazing yet.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: 260px;
height: 240px;
border-left: 1px solid;
border-right: 1px solid;
}
<div>Testing</div>
Auto width
Example using calc, this will work with any size of text.
* {
box-sizing: border-box;
}
div {
width: 300px;
height: 200px;
border-top: 1px solid;
border-bottom: 1px solid;
margin: 100px;
position: relative;
padding: 10px 25px;
}
div:after {
content: "";
display: block;
position: absolute;
top: -20px;
left: 20px;
width: calc(100% - 40px);
height: calc(100% + 40px);
border-left: 1px solid;
border-right: 1px solid;
}
<div>Hello</div>