Cascading Style Sheets allows you to specify few border properties. In last article we described the basic ones of border radius. Today we will look an equally important value – border color. 

There are few ways to define it. In my opinion the simplest one is setting this by HEX value, as in the following example.

border-color: #ff00ff;

Next possible way is RGB or RGBA value, second one allows also to define alpha channel (opacity).

border-color: rgb(255, 0, 255);
border-color: rgba(255, 0, 255, 0.4);

A similar way to this with the values ​​of rga and rgba is HSL, here you can also add alpha channel (in HSLA).

border-color: hsl(300, 100%, 50%);
border-color: hsla(300, 100%, 50%, 0.4);

Where to look for colors?

We can find a lot of usefull tools for this, probably one of most comfortable is Color Wheel, you can generate hex color code and get other values by clicking “get info about color”.