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


Solution:1

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;  


Solution:2

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;  


Solution:3

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


Solution:4

Or if all borders have same style, just:

border:10px;  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »