CSS border-color

The border-color CSS property is a shorthand property that sets the colors of the four borders of an element. It takes up to four values. If one is given, all borders are painted the same color. Four values can be used to color each border independently.

Note that all four borders are painted always. To override a border color while preserving the rest, use the border-color longhands: border-top-color, border-right-color, border-bottom-color and border-left-color.

#rgbahsla...
border-color: colors
border-color: #1ef05e;                           /* all four borders */
border-color: #f4b83f #9bf3f2 #cb87ef #ef878c;   /* order: top right bottom left */
border-color: #f4b83f #9bf3f2 #cb87ef;           /* order: top right&left bottom */
border-color: #f4b83f #9bf3f2;                   /* order: top&bottom right&left */
border-color: rgb(230,80,40);                    /* red green blue [0-255] */
border-color: hsl(300, 80%, 90%);                /* hue[0-360] saturation[0%-100%] lightness[0%-100%] */
border-color: hsla(300, 80%, 90%, 0.8);          /* opacity[0-1] */

Note the clockwise order, starting with the top border, and how all borders are assigned a color. The assignment works just as for the margin and padding properties.

border-color requires border-style to be set for the border to be displayed. eg. border-color: green; requires border-stye: solid; or similar.

The initial value of color refers to the value of the color property, whether inherited or explicitly set.

Browser Support: Full. HSL, HSLA and RGBA colors are not supported by IE8 and below.

Usage

Use the border-color property to set or override the color of the four borders. The border property sets the same properties, including color, for the four borders. border-color is the shortest way to assign separate colors. Here's a box with border colors separated by 90 degrees (square color scheme).

.example{
border-style: solid; border-width: 10px; border-color: hsl(0,60%,50%) hsl(90,60%,50%) hsl(180,60%,50%) hsl(270,60%,50%);
}

Remove border-style and border-color won't have any effect (style defaults to none).

Border Colors

There are usually three ways to specify a color in CSS: Hex (eg. #ff0000), RGB (eg. rgb(255,0,0)) and HSL (eg. hsl(0,100%,50%)). They differ in convenience only. While hex is the traditional way you most certainly know, RGB and HSL are more familiar models, with almost full support. Here's a tool that will help you grasp HSL colors in 30 seconds (click-drag the arrows). Keep in mind that HSL is not supported by IE8 and below, but RGB has full support. See CSS colors for more.

Transparency is allowed for RGB and HSL colors only (IE8+ and modern browsers) through the rgba() and hsla() functions.

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>