Tengo un margen hecho asi (ejemplo Fiddle):
.menu--margen {
background: #f4f4f4;
border-right: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-bottom: none;
margin: 3px auto;
position: relative;
}
.menu--margen:before {
padding: 20px;
border-right: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-top: none;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Hay alguna manera de simplificar el css del border? He probado:
border: 1px 1px 0px 1px solid #f0f0f0;
Pero no parece funcionar.
border
con 4 valores, cada valor se aplica atop
,right
,bottom
,left
, en ese orden. Veo que dicesborder-top: none
por ende deberías tenerborder: 0px 1px 1px 1px solid #f0f0f0