CSS border-color Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The border-color CSS property is used to set the color of an element's borders. It allows you to define the color of each individual border (top, right, bottom, left) separately, or you can specify a single color value that will be applied to all borders if only one color is provided. This property is commonly used in combination with other border-related properties like border-width and border-style to fully control the appearance of an element's borders, allowing web designers to create visually appealing and customized border effects for elements on a webpage.

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: Yes
JavaScript syntax: object.style.borderColor

Interactive Demo

border-color: blue;

border-color: #ADB946;

border-color: rgb(25, 201, 33);

border-color: rgba(123, 45, 87, .5);

border-color: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-color: <color>{1,4}

Values

<color>Specify the color to use on all borders. This can be anywhere from one to four values representing the top, right, bottom, and left border respectively.
transparentThis will apply a border that is not visible but it can have a width applied.
inherit

Example

HTML

<div class="border">This is an example of the border-color property using a purple solid border 2px in width.</div>

CSS

.border {
   border-style: solid;
   border-width: 2px;
   border-color: purple;
   margin: 20px;
   padding: 20px;
}

Result

Editor

Browser Support

The following table will show you the current browser support for the CSS border-color property.

Desktop

12	1	1	3.5	1

Tablets / Mobile

18	4	10.1	1	1	4

Last updated by CSSPortal on: 31st December 2023

Support Us