border-color's transparent property

there is a simple rule for the order in which the sides appear in such shorthand notations:

TRouBLe: Top Right Bottom Left

if you have less than 4 arguments, the missing ones are filled with the following rules (depending on how many arguments are present or missing):

3 values present: left = right
2 values present: left = right & bottom = top
1 value present:  left = right = bottom = top

so in your example 

border-color: rgba(111,111,111,0.2) transparent transparent;

according to the rules, we have 

top = rgba
right = transparent
bottom = transparent
left = right = transparent

similar in the other example:

border-color: rgba(111,111,111,0.2) transparent;

we get the following

top = rgba 
right = transparent
bottom = top = rgba
left = right = transparent

What you need to know is border-color:red black blue; will make the top border red, the bottom one blue and the left and right ones black, and that explains why you get an arrow in your first example:

  • Top colored
  • everything else transparent

It also explains the 2nd example:

  • Top & bottom colored
  • left & right transparent

Example

This style rule assigns a red border to the top, a green border to the bottom, and blue borders to the left- and right-hand sides of paragraphs within the element with ID "example":
#example p {
  border-color: red blue green;
  border-style: solid;
}

Source

For a details explanation of the CSS triangle effect, see: How does this CSS triangle shape work?

Tags:

Css

Recent Posts