Lados de borde de CSS

CSS Borde - Borde individual

Desde el ejemplo del capítulo anterior, ya ha visto que se puede especificar un borde diferente para cada lado.

En CSS, hay algunas propiedades que se pueden usar para especificar cada borde (superior, derecho, inferior e izquierdo):

Ejemplo

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

Resultados:

Diferentes estilos de borde

Prueba por ti mismo

Diferentes estilos de borde

El resultado del ejemplo anterior es el mismo que este:

Ejemplo

p {
  border-style: dotted solid;
}

Prueba por ti mismo

El principio de funcionamiento es el siguiente:

Si border-style La configuración de propiedades establece cuatro valores:

border-style: dotted solid double dashed;

  • El borde superior es de línea punteada
  • El borde derecho es de línea sólida
  • El borde inferior es de línea doble
  • El borde izquierdo es de línea punteada

Si border-style La configuración de propiedades establece tres valores:

border-style: dotted solid double;

  • El borde superior es de línea punteada
  • La orilla derecha e izquierda es línea sólida
  • El borde inferior es de línea doble

Si border-style La propiedad establece dos valores:

border-style: dotted solid;

  • La orilla superior e inferior es línea punteada
  • La orilla derecha e izquierda es línea sólida

Si border-style La propiedad establece un valor:

border-style: dotted;

  • Las cuatro orillas son líneas punteadas

Ejemplo

/* 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; 
}

Prueba por ti mismo

Se utiliza en el ejemplo anterior border-style La propiedad. Pero border-width y border-color También es aplicable.