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

poner un borde en html

Question

¿Hay alguna manera de combinar la frontera superior, frontera derecha, frontera izquierda, frontera abajo en CSS como un estilo súper taquigrafía.

p.ej:

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

Answer 1

No, no puede configurarlos como uno solo, por ejemplo, si tiene div {border-top: 2px solid red; borde-derecha: 2px rojo sólido; borde inferior: 2px rojo sólido; border-left: 2px rojo sólido; } mismas propiedades para cuatro patas, entonces puede configurarlas en una sola línea

div{border:2px solid red;}

Answer 2

No, no puedes configurarlos todos en una sola declaración.
En el caso general, necesita 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 complicado. Sería más legible 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 3

O si todas las fronteras tienen el mismo estilo, solo:

border:10px;

Answer 4

Su caso es extremo, pero aquí hay una solución para otros que se ajusta a un escenario más común de querer diseñar menos de 4 bordes exactamente igual.

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

eso 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;