Are you ever tried multiple borders around an element/div? You may use multiple wrapper div and set CSS border property. But you are using redundant markup to accomplish.

Today I will show a cool trick to show multiple borders using a single element. no Extra Div,:after or :before.

What we’ll use is box-shadow property to make multiple border. Other border meta property like border-radius will work perfectly.

Let’s check out, how we’ll calculate border width using box-shadow property.

multiple-border

 

So here is our single element.

1
<div class="block"></div>

And Here is our css

01
02
03
04
05
06
07
08
09
10
11
12
13
14
.block {
  width: 200px;
  height: 200px;
  position: relative;
  box-sizing:border-box;
  margin: 50px auto;
  border-radius:5px 0px;
  box-shadow:
    0 0 0 6px #2c3e50,
    0 0 0 15px #1abc9c,
    0 0 0 25px #FFF,
    0 0 0 30px #9b59b6,
    0 0 0 35px #c0392b;
}

If you want improve the demo, you can fork from Codepen.