Combinación de borde superior, borde derecho, borde izquierdo, borde inferior en CSS

Question

¿Hay alguna manera de combinar borde superior, borde derecho, borde izquierdo, borde inferior en CSS como un estilo súper taquigrafía.

por ejemplo:

border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f); 

Answer 1

No, no se puede establecer a todos en una sola sentencia.
En el caso general, se necesitan al menos tres propiedades:

border-color: red green white blue; 
border-style: solid dashed dotted solid; 
border-width: 1px 2px 3px 4px; 

Sin embargo, eso sería bastante desordenado. Sería más fácil de leer y fácil de mantener con cuatro:

border-top: 1px solid #ff0; 
border-right: 2px dashed #f0F; 
border-bottom: 3px dotted #f00; 
border-left: 5px solid #09f; 

Answer 2

O si todos los bordes tienen el mismo estilo, simplemente:

border:10px; 

Answer 3

no No se puede establecer como uno solo por ejemplo, si usted tiene div { border-top: 2px sólido de color rojo; borde-derecha: 2px rojo sólido; borde inferior: 2px rojo sólido; borde-izquierda: 2px rojo sólido; } mismas propiedades de cuatro patas entonces se puede establecer en una sola línea de

div{border:2px solid red;} 

Answer 4

Su caso es una alternativa extrema, pero aquí es una solución para los demás que se ajuste a un escenario más común de querer el estilo de menos de 4 bordes exactamente iguales.

border: 1px dashed red; border-width: 1px 1px 0 1px; 

que es un poco más corto, y tal vez más fácil de leer que

border-top: 1px dashed red; border-right: 1px dashed red; border-left: 1px dashed red; 

o

border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;