Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

border

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); 
like image 659
Starx Avatar asked Jun 27 '10 09:06

Starx


People also ask

Can you add 2 borders in CSS?

Multiple borders in CSS can be done by box-shadow property. Generally, we can get a single border with border property. Box-shadow property is not for multiple borders, but still, we are creating multiple borders with box-shadow property.

How do you add top and bottom border in CSS?

You can use the following in your css or style tag .... Using the border-width selector you can define the various border thickness. The values are inserted in the order top, right, bottom, left and the shorthand version is top/bottom and right/left which is what I've used.


1 Answers

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; 
like image 70
Kobi Avatar answered Oct 13 '22 05:10

Kobi