Take the 2-minute tour ×

Is there a way of combining border-top,border-right,border-left,border-bottom in CSS like a super shorthand style.


border: (1px solid #ff0) (2px dashed #f0F) (3px dotted #F00) (5px solid #09f);
share|improve this question

5 Answers 5

up vote 31 down vote accepted

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
share|improve this answer
Thanks, I can use this to create what I wanted. –  Starx Jun 27 '10 at 10:02
This works really nice when you are trying to show a border on just the top and bottom: border-style: solid; border-width: 1px 0; –  BananaNeil Nov 15 '13 at 22:32

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;


border-color: red; border-style: dashed; border-width: 1px 1px 0 1px;
share|improve this 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;}
share|improve this answer
Dont you think, your point is already answered by other answers? –  Starx Oct 25 '12 at 23:48

Or if all borders have same style, just:

share|improve this answer
Sorry, I missed the point, See my Question for the update –  Starx Jun 27 '10 at 9:49


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


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

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

border: 10px;

More Info:



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.

share|improve this answer
or just border: 10px; –  pejuko Jun 27 '10 at 9:48
@Starx: See my updated answer please. –  Sarfraz Jun 27 '10 at 9:53

Your Answer


