围绕div设置边框

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;
}