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

Answer 1

Yes,

border: 10px 5px 10px 5px;
         ^    ^    ^    ^
         t    r    b    l

where

t = top
r = right
b = bottom
l = left

If you want to have same width for all sides, use simply:

border: 10px;

More Info:

http://www.w3schools.com/css/css_border.asp

Update:

Something like this:

border: (1px solid #ff0) (1px solid #f0F) (1px solid #F00) (1px solid #09f)

is not possible because there is no way to combine multiple styles in a shorthand version.

Answer 2

Or if all borders have same style, just:

border:10px;

Answer 3

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