CSS: split box border color - css

Question

I am trying to build a box, and I want that each line/div to be fully transparent in the middle and opaque at the edges. (In the image, the circled parts should be transparent...) I wrote something like this:
.box {
height: 100px;
width: 100px;
border-left: solid green;
border-right: solid green;
border-top: solid red;
border-bottom: solid red;
}
but, of course, it does not give me the result I want.... I can not figure out any way to fix that "opaque-transparent" problem.. Any help? Thanks in advance!

Answer 1

You need to draw your borders via a gradient eventually: (untill border gradient is avalaible through all major browser ... chrome can do it for ages, FF still not )
.box {
height: 100px;
width: 100px;
padding:3px;
background:
linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) top left no-repeat,
linear-gradient(to left, red 33.33%, transparent 33.33%, transparent 66.66%, red 66.66%) bottom left no-repeat,
linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%) top left no-repeat,
linear-gradient(to top, green 33.33%, transparent 33.33%, transparent 66.66%, green 66.66%)top right no-repeat;
background-size: 100% 3px, 100% 3px, 3px 100%, 3px 100%;
}
<div class="box"></div>
Box-shadow on a known sized box can do some things too :
.boxbis {
margin: 3em;
height: 200px;
width: 200px;
background: gray;
box-shadow: 70px 70px 0 -60px turquoise, 70px -70px 0 -60px pink, -70px 70px 0 -60px tomato, -70px -70px 0 -60px orange, inset 0 0 0 3px white
}
<div class="boxbis">
<div>