Skip to content
Related Articles

Related Articles

CSS | border-color Property
  • Last Updated : 07 Aug, 2019

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:




    <!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>
  • 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:




    <!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>
  • 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:




    <!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>                    
  • 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:




    <!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>
  • 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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :