Día 18: Border Sides

Bordes - lados individuales

De los ejemplos anteriores, ha visto que es posible especificar un borde diferente para cada lado del elemento.

En CSS, también hay propiedades para especificar cada uno de los bordes (top, right, bottom y left):

Ejemplo:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

El ejemplo anterior da el mismo resultado que este:

Ejemplo:

p {
  border-style: dotted solid;
}

Pues así es como funciona (como un reloj análogo):

Si la propiedad border-style tiene cuatro valores:

• border-style: dotted solid double dashed;

  • el borde superior sería dotted

  • el borde derecho sería solid

  • el borde inferior sería double

  • el borde izquierdo sería dashed

Si la propiedad border-style tiene tres valores:

• border-style: dotted solid double;

  • el borde superior sería dotted

  • los bordes derecho e izquierdo serían solid

  • el borde inferior sería double

Si la propiedad border-style tiene dos valores:

• border-style: dotted solid;

  • los bordes superior e inferior serán dotted

  • los bordes derecha e izquierda serán solid

Si la propiedad border-style tiene un valor:

• border-style: dotted;

  • todos los bordes serán dotted

/* Cuatro valores */
p {
  border-style: dotted solid double dashed;
}

/* Tres valores */
p {
  border-style: dotted solid double;
}

/* Dos valores */
p {
  border-style: dotted solid;
}

/* Un valor */
p {
  border-style: dotted;
}

Resumen

En CSS, se pueden especificar bordes diferentes para cada lado de un elemento usando las propiedades border-top-style, border-right-style, border-bottom-style y border-left-style. También se puede usar la propiedad border-style con uno, dos, tres o cuatro valores para especificar los bordes de manera más concisa.

Traducido con 💚 desde W3Schools.com