border-color

The Border Color sets the color of the four borders. This property can take 1-4 colors. This CSS property is not inherited.

Please Note: You must declare the border style property before you can change the color of the border.

If you've ever doubted the claim that Cascading Style Sheets (CSS) give you absolute control over page layout, then you've never played around with CSS border properties. Use them to put a custom border around anything on your page from text to images to tables. They're a great way to add emphasis and visual interest to your page without increasing page load time with images.

Example: There are two ways you can give the 4 sides of a border different colors...

First one:

.table {border-color: orange}

.table_2 {border-color: red green blue yellow}

-
Second Example:

-1 color

(border-color:red)

 If you use only one color, then it will be used for all four borders.

 

-2 colors

(border-color:red blue)

 The first color will be used for the top and bottom border and the second one for the left and right border.

 

-3 colors

(border-color:red blue green)

 The first color will be used for the top, the second for left and right, and the third for the bottom border.

 

-4 colors

(border-color:red blue green yellow)

 The first one will be used for the top, the second one for right, the third one for bottom, and the fourth for 

the left border.

html:

p.table_2

{

    border-top-color:red; 

    border-left-color:blue;

    border-right-color:green; 

    border-bottom-color:black; 

    border-width:4px;

    border-style:solid; 

    padding:8px;

}






All borders should have a different color.







      

    

 Create your own educational wiki!HelpPublic, not yet premium Privacy Policy RSS