How to create a border with spaces in it [duplicate] - css

Question

This question already has answers here:
How can I show only corner borders?
(20 answers)
Closed 7 years ago.
I am trying to figure out how to use CSS to create the below effect.
I've tried to do this by creating 4 divs within a parent div and positioning them on all four sides.
This works, but breaks when I need those 4 divs to be transparent to the background and not a single color.
For example, I want to try to make this work again a picture background and not just a solid background.
If the background is solid I can make the 4 divs the same color as the background, the problem is that if the background is a picture I can't have the 4 divs match the background.
Also, I understand my fundamental approach to the problem might be wrong. I heard someone mentioning using a pseudo :before and :after to accomplish this effect for effectively, but I'm not sure how to do that.

Answer 1

Here I made it as close as I could get with the least code:
.daysleft {
position: relative;
padding: 20px;
width: 100px;
text-align: center;
}
.daysleft span {
display: block;
z-index: 2;
position: relative;
}
.white {
background-color: #fff;
height: 20px;
width: 101%;
position: absolute;
top: 50%;
left: 0;
z-index: 1;
transform: translateY(-50%);
}
.daysleft:before {
height: 100%;
content: "";
position: absolute;
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
left: 0px;
top: 0;
}
.daysleft:after {
height: 100%;
content: "";
position: absolute;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
width: 20px;
right: 0px;
top: 0;
}
<div class="daysleft"><div class="white"></div><span>37 Days left</span></div>
EDIT:
Found a way to interupt the borders! Awnser updated.

Answer 2

I'm guessing this is the sort of thing you want.
.container {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 15px;
background: #ccc;
}
#content {
margin: 0 auto;
position:relative;
display: inline-block;
padding: 10px;
background: #ccc;
font-size: 38px;
color: #333;
}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
position:absolute;
width:15px;
height: 15px;
border-color:#777;
/* or whatever colour */
border-style:solid;
/* or whatever style */
content:' ';
}
#content:before {
top:0;
left:0;
border-width: 2px 0 0 2px
}
#content:after {
top:0;
right:0;
border-width: 2px 2px 0 0
}
#content>:first-child:before {
bottom:0;
right:0;
border-width: 0 2px 2px 0
}
#content>:first-child:after {
bottom:0;
left:0;
border-width: 0 0 2px 2px
}
<div class="container">
<div id="content">
<p><i>37</i> days left</p>
</div>
</div>
Example:
http://jsfiddle.net/link2twenty/5gjh6jkx/

Answer 3

demo
Try out this... here am using background as image
<div class="parent">
<div class="child">
37 days Left
</div>
</div>
CSS:
.parent{
background-color : #ccc;
padding : 20px;
width : 100%;
margin : 0 auto;
}
.child
{
width: 100%;
padding: 10px;
text-align : center;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
border: 15px solid #ccc;
border-image: url('https://i.stack.imgur.com/1WlsT.png') 34% repeat;
}

Answer 4

Try something like this FIDDLE
DEMO CODE
HTML
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
</div>
CSS
.box1{
position:relative;
background:#FFF;
width:200px;
height:200px;
border:solid 2px #090;
-webkit-border-radius: 3px;
border-radius: 3px;
margin:0 auto;
}
.box2{
position:absolute;
width:210px;
height:180px;
background-color:#FFF;
top:10px;
left:-5px;
}
.box3{
position:absolute;
width:180px;
height:210px;
background-color:#FFF;
top:-5px;
left:10px;
}