CoderTools Web site

CSS border-color

Description


The border-color property is a short-hand command to define the border colors of all sides an html element. Each side can have a different color.

No default

Note: You have to set the border-style as well otherwise the border will not show because border-style defaults to none.
    Set the border color for all sides of an element:
    
    border-color: color;            /* e.g. border-color: blue;             */
    border-color: #rrggbb;          /* e.g. border-color: #0000FF;          */
    border-color: rgb(n, n, n);     /* e.g. border-color: rgb(0,0,255);     */
    border-color: transparent;      
    border-color: inherit;
   
        
    Set different border colors for individual sides of an html element:
    
    border-color: color color color color;         
    border-color: #rrggbb #rrggbb #rrggbb #rrggbb;
    border-color: rgb(n,n,n) rgb(n,n,n) rgb(n,n,n) rgb(n,n,n);
    
See also: border-top-color, border-bottom-color, border-left-color, border-right-color.
HTML & CSS Editor with FTP / FTPS

Examples for Border


Example 1:

This is the most straightforward example, all borders the same collow of blue.

test text test text test text test text
    <style>
         #test { border-style: solid; border-color: blue; }
    </style>

    <div id="test">test text test text test text test text</div>

Example 2:

This example shows different colors set for each border. I use the different types of color values you can use to show that css does not care which one you use - they can be all the same or all different.

test text test text test text test text
    <style>
         #test2 { border-color: red #0000ff rgb(0,255,0) yellow; border-style: solid;  }
    </style>

    <div id="test2">test text test text test text test text</div>

Values for Border


Name Values Description
border-color color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
Or can use different values for each border:
color color color color e.g. blue red green yellow
transparent
inherit
Set the color of the whole border of an html element. Can specify one color for all borders or different colors for each side of the html element.
border-left-color color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit
Specifies the color of the left border.
border-right-color color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit
Specifies the color of the right border.
border-top-color color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit
Specifies the color of the left border.
border-bottom-color color e.g. yellow
#rrggbb e.g. #ff0000
rgb(0-255,0-255,0-255) e.g. rgb(255,0,0)
transparent
inherit
Specifies the color of the left border.


TotalEdit Now Completely Free

CoderTools TotalEdit - The Free Text Editor

A powerful editor and notepad replacement TotalEdit makes it easier to complete your file editing and software development tasks. TotalEdit is FREE for commercial and non-commercial purposes (its freeware).

8/31/2014 6:20:04 PM
Terms Of Use | Privacy Statement | Copyright 2006-2010 © Independence Software LLP