Home/ Questions/Q 7409683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T06:07:14+00:00

I’ve found this cool example of border-color ‘s transparent property usage to make an

  • 0

I’ve found this cool example of border-color‘s transparent property usage to make an arrow.
I understand how borders are drawn and how an empty element with one side set border can help achieve arrow effect, but what makes me wander in this example is usage of transparent.
Take a look at this simple code:

<div id="daniel"></div>

CSS:

#daniel{
 border-color: rgba(111,111,111,0.2) transparent transparent;
 border-style: solid;
 border-width: 15px;
 position: absolute;
}

With this code I get an arrow pointing down. (JSFIDDLE)

With only one transparent I get an hourglass effect. (JSFIDDLE):

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

What confuses me is not knowing what border-{side} transparent refers to in this shorthand properties.

Hope that makes sense.
Any help appreciated.

Thanks 😉

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
    • 0