CSS Border Color Longhand Properties

The border-top-color, border-right-color, border-bottom-color and border-left-color CSS properties specify the color of one border of an element. They take any valid CSS color, which means borders can be transparent.

Use border-color to set each border color indepently or all equal. The border property gives the four borders the same color, width and style.

#rgbahsla...
border-bottom-color: color
border-bottom-color: #ff00ff;
border-right-color: rgb(60, 240, 60);          /* red green blue [0-255] */
border-top-color: rgba(60, 240, 60, 0.8);      /* opacity[0-1] */
border-bottom-color: hsl(300, 80%, 70%);       /* hue[0-360] saturation[0%-100%] lightness[0%-100%] */
border-left-color: hsla(300, 80%, 70%, 0.8);   /* opacity[0-1] */

One of the border color properties is not enough for a border to show up. They need at least a border style to be set. eg. border-top-color: green; won't do it without border-top-style: solid; or equivalent.

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

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

Usage

The border-color longhand properties change the color of one of the borders while preserving its width and style. They are specially suitable for overriding a more general property like border or border-color.

.example{
border: 5px solid orange; border-right-color: red; border-bottom-color: red;
}

The border colors above may also be set using the border-color shorthand:

border-color: orange red red orange;

border-color properties are commonly used along with border-width, border-style or their longhand properties: border-bottom-color, border-bottom-style...

Specifying Color

CSS gives us plenty of options when it comes to specifying a color. The models available difer in convenience. HSL is the easiest to understand but it's still not widely adopted. Here's a tool that will help you grasp HSL colors in 30 seconds. Try changing H, S and L and you'll see it's pretty simple. See CSS colors for more.

Transparency is allowed for RGB and HSL colors only. Browser support for RGB is slightly better because IE8 does not support HSL.

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>