css3 dropshadow multiple borders

[MattDLEA]

I have this css

Code:

.multiborder{

/* Standard syntax */

border-radius: 5px;

background: #f4f4f4;

border: 3px solid #fff;

 

box-shadow: 0 0 0 3px #ffdc01,

0 0 0 6px #fff,

0 0 0 9px #d1232a;

}

Which puts a white yellow white red boarder around eliminates

 

How would I modify it to be only on the left and right of an element (i.e for a page wrapper)

 

I have tried setting border-top: 0px to give it no height/width but it still appears

 

Thanks

[spadam]

Is this what you're after?

box-shadow: 3px 0 0 0 #ffdc01,
-3px 0 0 0 #ffdc01,
6px 0 0 0 #fff,
-6px 0 0 0 #fff,
9px 0 0 0 #d1232a,
-9px 0 0 0 #d1232a;

[MattDLEA]

Thats worked a treat @spadam

 

How would I alter it so it did the sides and the bottom?

[spadam]

This is the best I can get it just using box shadow...

 

box-shadow: 3px 0 0 0 #ffdc01,
-3px 0 0 0 #ffdc01,
0 3px 0 0 #ffdc01,
6px 0 0 0 #fff,
-6px 0 0 0 #fff,
0 6px 0 0 #fff,
9px 0 0 0 #d1232a,
-9px 0 0 0 #d1232a,
0 9px 0 0 #d1232a;
}

 

You can see that the corners on the outer borders don't join properly but at least they are uniform. I can't find an easy way to achieve joined up layered borders on 3 sides only I'm afraid. The best I can come up with is to draw all the borders like in your first example and then use css to place another div which obscures the top border but this requires a solid background colour to work and I think a fixed width div:

.multiborder2{
margin:40px;
width:300px;
height:300px;
/* Standard syntax */
border-radius: 5px;
background: #ccc;
border: 3px solid #fff;
box-shadow: 0 0 0 3px #ffdc01,
0 0 0 6px #fff,
0 0 0 9px #d1232a;
}
.multiborder2::before{
background: #FFF;
   content: "";
width:324px;
height:12px;
margin-left:-12px;
margin-top:-12px;
   display: block;
}

 

Maybe someone else with stronger powers than mine can suggest a better solution but that's the best I've got for now

[mikecampbell]

Edit - just checked spadam's answer and his is actually better .

 

Using a different technique, you can get something (I think) similar to what you're after, see it in action:

 

.box {
   margin: 20px;
   padding: 20px;
   background: #F4F4F4;
   position: relative;
   height: 100%;
   width: 100%;
}


.box, .box:before, .box:after {
   -moz-border-radius: 5px;
   border-radius: 5px;
}


.box:before {
   border-left: 3px solid #ffdc01;
   border-right: 3px solid #ffdc01;
   border-bottom: 3px solid #ffdc01;
   content: '';
   position: absolute;
   top: -6px;
   right: -6px;
   bottom: -6px;
   left: -6px;
}


.box:after {
   border-left: 3px solid #d1232a;
   border-right: 3px solid #d1232a;
   border-bottom: 3px solid #d1232a;
   content: '';
   position: absolute;
   top: -12px;
   right: -12px;
   bottom: -12px;
   left: -12px;
}

Edited December 19, 2014 by mikecampbell