Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-color

border-color

Sets the border colors for all sides at once.

You can specify different colors for each side by providing multiple values separated by spaces.

1 value: applied to all four sides (top, right, bottom, left).
2 values: first applies to top and bottom, second to left and right.
3 values: first applies to top, second to left and right, third to bottom.
4 values: applied to top, right, bottom, and left (clockwise from top).

Sample Code

style.css

/* Applies to all four sides. */
div.test { border-color: red;}

/* Applies to top/bottom and left/right. */
div.test1 { border-color: red #ff0;}

/* Applies to top, left/right, and bottom. */
div.test2 { border-color: red #ff0 #00f;}

/* Applies to top, right, bottom, and left. */
div.test3 { border-color: red #ff0 #00f black;}

Available Values

Value	Description
transparent	Sets the border to transparent.
Color code or color name	Changes the border to the specified color. If no『border-color』value is set, the color of the『color』property is used as the default.

Browser Preview

※ The samples below use『border-style: solid』.

<div style="border-color: red; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border-color: red #ff0; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border-color: red #ff0 #00f; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

<div style="border-color: red #ff0 #00f black; border-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>