Search within TutorialsPark

CSS border-color Property


To set the color of border for all edges


Definition and Notes.

1. The CSS border-color property is a shorthand to set the border color of all the edges with same color or different color for all the edges in a single declaration.

2. Seperate colors can be assigned for each borders using the 1 to 4 values.

a. border-color: red blue green yellow (i.e clockwise starting from top)

red : top

blue : right

green : bottom

yellow : left


b. border-color: red blue green (i.e clockwise starting from top)

red : top

blue : right and left

green : bottom


c. border-color: red blue (i.e clockwise starting from top)

red : top and bottom

blue : right and left


d. border-color: red

red : all edges of the border


Syntax:

CSS border-color property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- The border-style must be specifies before setting the border-color. As there needs to be a border before we set it color

Property Values

Value Description
color To specify the color using either of Hex Codes, rgba(), hsla() or keywords.
transparent The border-color is transparent. Its the default value.
inherit The values for border-color are inherited from the parent element.

Specifications

Specs Value
Name border-color
Value Hex codes, rgba(), hsla()
Initial Value not defined
Applies to All Elements.
Javascript syntax object.style.borderColor=" #fa4b2a brown "
Inherited No
Computed Value See Individual Properties
Browser Support internetexplorer safari firefox opera chrome

Related Examples.