Combinaison border-top, border-right, border-left, border-bottom dans CSS

Question

Existe-t-il un moyen de combiner border-top, border-right, border-left, border-bottom dans CSS comme un style super raccourci.

par exemple:

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

Answer 1

Non, vous ne pouvez pas les mettre tous dans une seule instruction.
Dans le cas général, vous avez besoin d'au moins trois propriétés:

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

Cependant, ce serait tout à fait désordre. Il serait plus lisible et maintenable avec quatre:

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

Answer 2

Ou si toutes les frontières ont même style, il suffit:

border:10px; 

Answer 3

Non, vous ne pouvez pas les définir comme seul par exemple si vous avez div { border-top: 2px solide rouge; bordure-droite: 2px rouge solide; bordure inférieure: 2px rouge solide; bordure gauche: 2px rouge uni; } mêmes propriétés pour tous les fours, vous pouvez les mettre dans une seule ligne

div{border:2px solid red;} 

Answer 4

Votre cas est un cas extrême, mais voici une solution pour d'autres qui correspond à un scénario plus commun de vouloir le style moins de 4 frontières exactement les mêmes.

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

qui est un peu plus court, et peut-être plus facile à lire que

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

ou

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