Styling border around div - html

Question

I'm a bit stuck on styling border around div box.
The problem is that I can't make borders not to be like:
Here is the real example what I have:
.num.num_1 {
border-left-color: #0D2431;
}
.num {
width: 60px;
height: 60px;
line-height: 50px;
border-width: 5px;
font-size: 40px;
}
.num {
float: left;
width: 40px;
height: 40px;
line-height: 36px;
text-align: center;
border: 2px solid #eee;
font-size: 20px;
color: #0D2431;
background-color: #fff;
}
div {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
}
<div class="num num_1">1</div>

Answer 1

.num.cheat:before {
content:"";
position: absolute;
left: -5px;
right: -5px;
top: -5px;
bottom: -5px;
}
.num_1:before {
border-left: 5px solid black;
}
.num_2:before {
border-left: 5px solid black;
border-top: 5px solid black;
}
.num_3:before {
border-left: 5px solid black;
border-top: 5px solid black;
border-right: 5px solid black;
}
.num_4:before {
border-left: 5px solid black;
border-top: 5px solid black;
border-right: 5px solid black;
border-bottom: 5px solid black;
}
.num {
width: 60px;
height: 60px;
line-height: 50px;
border-width: 5px;
font-size: 40px;
position: relative;
margin-right: 10px;
}
.num {
float: left;
width: 40px;
height: 40px;
line-height: 36px;
text-align: center;
border: 5px solid #eee;
font-size: 20px;
color: #0D2431;
background-color: #fff;
}
div {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
}
<div class="num num_1 cheat">1</div>
<div class="num num_2 cheat">2</div>
<div class="num num_3 cheat">3</div>
<div class="num num_4 cheat">4</div>
I modified your css a little bit. I solved it using the :before pseudo element.

Answer 2

Better yet, you can use box-shadow to achieve this without any extra elements.
See: http://jsfiddle.net/w3b1uh7g/2/
.num {
border-left: 0px;
box-shadow: -5px 0 0 0 #0D2431;
}

Answer 3

You can do a weird series of nested divs:
.border {
background: green;
padding: 10px 10px 10px 0;
display: inline-block;
}
.border-left {
padding-left: 10px;
background: black;
display: inline-block;
}
.inside-box {
background: red;
height: 100px;
width: 100px;
}
<div class="border-left">
<div class="border">
<div class="inside-box">1</div>
</div>
</div>

Answer 4

Just add these to your css. the Pseudo Elements should make it square without adding extra divs in the HTML
.num.num_1:before {
content: "";
position: relative;
display: block;
top: -5px;
left: -5px;
height: 5px;
width: 5px;
background: black;
}
.num.num_1:after {
content: "";
position: relative;
display: block;
bottom: 0px;
left: -5px;
height: 5px;
width: 5px;
background: black;
}