What many people don’t know is that when you are drawing borders in CSS you are actually drawing triangles. Four triangles each represent one border of a box. With coloring one border and setting the others to transparent, you can create a singular triangle.
As you can see in the box below, we have four triangles in different colors.
border-color: red green blue yellow;
When creating the singular triangle we set a color on one border and the rest transparent. It is done easily yet this is a technique that not many know.
border-color: transparent transparent blue transparent;
We set the border style to solid but when you change this style you will get different results, some examples: