CSS border-color Property

Description

The border-color property specifies the border color of an element. Used as a shortcut to determine the entire border color in one rule.

Initial value: See individual properties
Applies to: All elements
Inherited: No
Media: Visual
Computed value: See individual properties
Animatable: Yes
CSS Version: CSS1, CSS2, CSS3
JavaScript syntax: object.style.borderColor

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

Give it a Try

Click the button below to experiment with this property.

Give it a Try!

Browser Support

Desktop

4	12	1	1	3.5	1

Tablets / Mobile

4	18	4	10.1	1	1.0

Last updated by CSSPortal on: 12th October 2019

Share this Page

If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.

URL

Menu