CSS | border-color Property

The border-color property is used to add color to border of an element. This property does not work if it is used alone, so first, the “border-style” property is used to set the borders. This can take one to four values for the top border, right border, bottom border, and the left border respectively. If this property is not set then it inherits the color of the element.

Syntax:

border-color: color-value;

Property values: Where, color-value can be any of the following:

  • name – specify a color name, like “blue”.
  • Hex – specify a hex value, like “#0000ff”.
  • RGB – specify a RGB value, like “rgb(0, 0, 255)”.
  • transparent.

Set color-value by name: All the 140 valid CSS color names can be assigned to the border color.

  • Syntax:
    border-color: blue;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS border-color property</title>
        <style>
            h1 {
                color: #009900;
            }
              
            p.one {
                border-style: solid;
                border-color: blue;
            }
              
            p.two {
                border-style: solid;
                border-color: blue red yellow green;
            }
              
            p.three {
                border-style: solid;
                color: green;
            }
        </style>
    </head>
      
    <body>
        <h1 align="center">GeeksforGeeks</h1>
        <p class="one">A solid blue border</p>
        <p class="two">A solid multicolor border</p>
        <p class="three">A solid inherited color border</p>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Set color-value by HEX: HEX color value can be assigned to the border color. The pair of values in #rrggbb represent RGB values in hexadecimal system.

  • Syntax:
    border-color: #0000ff;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS border-color property</title>
        <style>
            h1 {
                color: #009900;
            }
              
            p.one {
                border-style: solid;
                border-color: #0000ff;
            }
              
            p.two {
                border-style: solid;
                border-color: #0000ff #ff0000 #ffff00 #00ff00;
            }
        </style>
    </head>
      
    <body>
        <h1 align="center">GeeksforGeeks</h1>
        <p class="one">A solid blue border</p>
        <p class="two">A solid multicolor border</p>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Set color-value by RGB: RGB color value can be assigned to the border color. In rgb(r, g, b) values r, g and b can vary from 0 to 255 for each of three.

  • Syntax:
    border-color: rgb(0, 0, 255);
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS border-color property</title>
        <style>
            h1 {
                color: #009900;
            }
              
            p.one {
                border-style: solid;
                border-color: rgb(0, 0, 255);
            }
              
            p.two {
                border-style: solid;
                border-color: rgb(0, 0, 255) 
                              rgb(255, 0, 0) 
                              rgb(255, 255, 0) 
                              rgb(0, 255, 0);
            }
        </style>
    </head>
      
    <body>
        <h1 align="center">GeeksforGeeks</h1>
        <p class="one">A solid blue border</p>
        <p class="two">A solid multicolor border</p>
    </body>
      
    </html>                 

    chevron_right

    
    

  • Output:

Set color-value to transparent: Transparent value can be assigned to the border color. The transparent value effect is not observed as it lets pass the background color pass through it.

  • Syntax:
    border-color: transparent;
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>CSS border-color property</title>
        <style>
            h1 {
                color: #009900;
            }
              
            p.one {
                border-style: solid;
                border-color: transparent;
            }
        </style>
    </head>
      
    <body>
        <h1 align="center">GeeksforGeeks</h1>
        <p class="one">A transparent border</p>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Notes:

  • If single color value is assigned, it set to all sides
  • If two color values are assigned, they set to adjacent sides(top and right respectively) and the opposite side colors become same.
  • If three color values are assigned, they set to adjacent sides(top, right and bottom respectively) and the remaining side color becomes same as opposite side.
  • If four color values are assigned, they set to adjacent sides(top, right, bottom, left respectively).

Supported Browsers: The browsers supported by CSS | border-color Property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.