Combining border-top border-right border-left border-bottom in CSS

Question

Is there a way of combining border-top border-right border-left border-bottom in CSS like a super shorthand style   eg    border   1px solid  ff0   2px dashed  f0F   3px dotted  F00   5px solid  09f

User · Answer

Or if all borders have same style  just   border 10px

User · Answer

No you can t set them as single one  for example if you have      div      border-top  2px solid red      border-right  2px solid red      border-bottom  2px solid red      border-left  2px solid red        same properties for all fours then you can set them in single line  div border 2px solid red

User · Answer

No  you cannot set them all in a single statement  At the general case  you need at least three properties   border-color  red green white blue  border-style  solid dashed dotted solid  border-width  1px 2px 3px 4px    However  that would be quite messy  It would be more readable and maintainable with four   border-top     1px solid   ff0  border-right   2px dashed  f0F  border-bottom  3px dotted  f00  border-left    5px solid   09f

User · Answer

Your case is an extreme one  but here is a solution for others that fits a more common scenario of wanting to style fewer than 4 borders exactly the same   border  1px dashed red  border-width  1px 1px 0 1px    that is a little shorter  and maybe easier to read than  border-top  1px dashed red   border-right  1px dashed red  border-left  1px dashed red    or  border-color  red  border-style  dashed  border-width  1px 1px 0 1px

User · Answer

I can relate to the problem  there should be a shorthand like     border  1px solid red top bottom left    Of course that doesn t work  Kobi s answer gave me an idea  Let s say you want to do top  bottom and left  but not right  Instead of doing border-top  border-left  border-bottom   three statements  you could do two like this  the zero cancels out the right side    border  1px dashed yellow  border-width 1px 0 1px 1px    Two statements instead of three  small improvement  -D

[css] Combining border-top,border-right,border-left,border-bottom in CSS

Examples related to css