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.
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.
Browser Support: Full but HSL, HSLA and RGBA colors are not supported by IE8 and below.
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.
The border colors above may also be set using the border-color shorthand:
border-color: orange red red orange;
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.