Shorthand: Border-Color

This example demonstrates how to set the border colors. Like the border-width and border-style properties, this too, can have from one to four values:

4 Values: border-color: #ff0000 blue #00ff00 rgb(250,0,255);
  • top border is Hex #ff0000, which is red
  • right border is blue
  • bottom border is Hex #00ff00, which is green
  • left border is rgb(250,0,255) which is pink
3 Values: border-color: #ff0000 blue #00ff00;
  • top border is Hex #ff0000
  • right and left borders are blue
  • bottom border is Hex #00ff00
2 Values: border-color: #ff0000 blue;
  • top and bottom borders are Hex #ff0000
  • right and left borders are blue
1 Value: border-color: #ff0000;
  • all four borders are Hex #ff0000.
Good habit Remember: To have a visible border, you MUST have a border-style defined! For this example, the border-style property is set to solid.
Back button Table of Contents Next button