1. Home

CSS border-color property

Set a color for the border

Definition and Usage

The border-color property sets the color of an element's four borders. This property can have from one to four values.

If the border-color property has four values:
  • border-color: red green blue pink;
    • top border is red
    • right border is green
    • bottom border is blue
    • left border is pink
    • If the border-color property has three values:
  • border-color: red green blue;
    • top border is red
    • right and left borders are green
    • bottom border is blue
    • If the border-color property has two values:
  • border-color: red green;
    • top and bottom borders are red
    • right and left borders are green
    • If the border-color property has one value:
  • border-color: red;
    • all four borders are red
    • Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.
    Show demo ❯
    Default value: The current color of the element
    Inherited: no
    Animatable: yes. Read about animatable Try it
    Version: CSS1
    JavaScript syntax: object.style.borderColor="#FF0000 blue" Try it

    Browser Support

    The numbers in the table specify the first browser version that fully supports the property.

    Property
    border-color 1.0 4.0 1.0 1.0 3.5

    CSS Syntax

    border-color: color|transparent|initial|inherit;

    Property Values

    Value Description Demo
    color Specifies the border color. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element Demo ❯
    transparent Specifies that the border color should be transparent Demo ❯
    initial Sets this property to its default value. Read about initial
    inherit Inherits this property from its parent element. Read about inherit

    More Examples

    Example

    Set a color for the border with a HEX value:

    div {border-color: #92a8d1;}

    Example

    Set a color for the border with an RGB value:

    div {border-color: rgb(201, 76, 76);}

    Example

    Set a color for the border with an RGBA value:

    div {border-color: rgba(201, 76, 76, 0.3);}

    Example

    Set a color for the border with a HSL value:

    div {border-color: hsl(89, 43%, 51%);}

    Example

    Set a color for the border with a HSLA value:

    div {border-color: hsla(89, 43%, 51%, 0.3);}

    Example

    Set a different border-color for each side of an element:

    div.ex1 {border-color: #0000ff;}
    div.ex2 {border-color: #ff0000 #0000ff;}
    div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
    div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}

    Related Pages

    CSS tutorial: CSS Border

    HTML DOM reference: borderColor property

    Categories

    HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

    Contact US