horizontal and vertical lines in a square - html

Question

Below is the image I am trying for, I managed to get a square using CSS, but I am trying for horizontal and vertical line in a square.
.hub{
width: 119px;
height: 101px;
background: #b5adad;
}
<div class="hub"></div>

Answer 1

There are many ways to do this and one would be to use gradients like below: (the image in question was actually a rectangle.)
The approach is very simple - we use 2 linear gradients to create two thin solid colored lines and then position the images such that they match our needs. Linear gradients are used even though it creates only a solid color because it is easier to control size and position of an image than background color.
div {
height: 100px;
width: 200px;
border: 1px solid red;
background-image: linear-gradient(to bottom, red, red), linear-gradient(to right, red, red);
background-repeat: no-repeat;
background-size: 1px 100%, 100% 1px;
background-position: 20px 0px, 0px 10px;
}
<div></div>
We can also create an output which has a fade-out or shadow effect like in the image in question:
div {
height: 100px;
width: 200px;
border: 1px solid;
background-color: gray;
background-image: linear-gradient(to bottom, black, black), linear-gradient(to right, red, transparent), linear-gradient(to right, black, black), linear-gradient(to bottom, red, transparent);
background-repeat: no-repeat;
background-size: 1px 100%, 1px 100%, 100% 1px, 100% 1px;
background-position: 20px 0px, 21px 0px, 0px 10px, 0px 11px;
box-shadow: inset 0px 0px 3px red;
}
<div></div>

Answer 2

Another way is to use :before and :after pseudo-elements:
.hub{
width: 119px;
height: 101px;
background: #b5adad;
position: relative;
padding: 18px 0 0 18px;
}
.hub:after, .hub:before {
content: " ";
background: black;
display: block;
position: absolute;
}
.hub:after {
width: 1px;
height: 100%;
left: 15px;
top: 0;
}
.hub:before {
width: 100%;
height: 1px;
top: 15px;
left: 0;
}
<div class="hub">Lorem ipsum dolor amet</div>