Make 4 cells with divisor - html

Question

How can I make these divisors of a simplest box. I have this simple box html and css.
HTML code is:
<div id="box"></div>
and CSS code of box is:
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
}
OK. Let's go to divisor... how can i do them? Image linked is here:
Thanks

Answer 1

A couple of pseudo-elements overlaid on top might work:
body {
background: #c0ffee;
}
#box {
width: 350px;
height: 200px;
margin: 2em auto;
border-radius: 5px;
/* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%);
/* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
position: relative;
}
#box::before,
#box::after {
content: '';
position: absolute;
}
#box::before {
width: 100%;
top: 50%;
left: 0;
margin-top: -3px;
height: 4px;
background: linear-gradient(to bottom, white, lightgrey);
border-radius: 2px;
z-index: 1;
}
#box::after {
width: 4px;
top: 0%;
left: 50%;
margin-left: -3px;
height: 100%;
background: linear-gradient(to left, white, lightgrey);
border-radius: 3px;
z-index: 2;
}
<div id="box"></div>

Answer 2

You are either going to need to insert a background image with the lines on the image or create sections within the box and styling the box based on where it is located in the main box.
#box{
width: 350px;
height: 200px;
border-radius: 5px; /* IE10+ */
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Opera */
background-image: -o-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(100, #d6d6d6)); /* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #d6d6d6 100%); /* W3C Markup */
background-image: linear-gradient(to bottom, #FFFFFF 0%, #d6d6d6 100%);
font-size:0px;
}
.section{
width:49.25%;
height:49%;
margin:0px;
padding:0px;
display:inline-block;
}
#top-left{
border-bottom:5px solid white;
border-right:5px solid white;
}
#top-right{
border-bottom:5px solid white;
}
#bottom-left{
border-right:5px solid white;
}
<div id="box">
<div class="section" id="top-left"></div>
<div class="section" id="top-right"></div>
<div class="section" id="bottom-left"></div>
<div class="section" id="bottom-right"></div>
</div>