4

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.

1
  • Que yo sepa, cuando usas border con 4 valores, cada valor se aplica a top, right, bottom, left, en ese orden. Veo que dices border-top: none por ende deberías tener border: 0px 1px 1px 1px solid #f0f0f0
    – user227
    el 11 abr. 2016 a las 20:11

1 respuesta 1

8

Estas líneas:

border-right: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-top: 1px solid #bbbbbb;
border-bottom: none;

Puedes simplificarlo en estas dos líneas:

border: 1px solid #bbb;
border-bottom: none;

Donde la primera define el estilo de los cuatro bordes y la segunda solo desactiva el border inferior. Además opcionalmente ya que #bbbbbb tiene los mismos 6 dígitos hexadecimales puedes simplificarlo como #bbb

De igual manera puedes hacer con las que están en el otro estilo

border-right: 1px solid #f0f0f0;
border-left: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
border-top: none;

Puedes cambiarlo a:

border: 1px solid #f0f0f0;
border-top: none;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.