border-color

by

The border-color property in CSS is used to set the color of an element’s border. It can be applied to all four sides of an element’s border individually or to all sides simultaneously.

border-color: top right bottom left;
  • top: Color for the top border.
  • right: Color for the right border.
  • bottom: Color for the bottom border.
  • left: Color for the left border.

Values

  • Keyword values: transparent, inherit, currentColor, and color names (e.g., red, blue, green).
  • Hexadecimal values: #RRGGBB (e.g., #FF0000 for red).
  • RGB values: rgb(R, G, B) (e.g., rgb(255, 0, 0) for red).
  • HSL values: hsl(H, S%, L%) (e.g., hsl(0, 100%, 50%) for red).
  • RGBA values: rgba(R, G, B, alpha) (e.g., rgba(255, 0, 0, 0.5) for half-transparent red).
  • HSLA values: hsla(H, S%, L%, alpha) (e.g., hsla(0, 100%, 50%, 0.5) for half-transparent red).

Examples

  • Setting the same color for all sides:
border-color: blue;
  • Setting different colors for each side:
border-color: red green blue yellow;
  • Using transparent borders:
border-color: transparent;
  • Using currentColor:
color: red;
border-color: currentColor;

Additional Considerations

  • To apply a border to an element, you’ll also need to set its border-style property (e.g., solid, dotted, dashed).
  • For more complex border effects, consider using border-radius to round corners or box-shadow to add shadows.