Transparent CSS borders with the inherited color

You can inherit CSS colors from parent elements using the  inherit  or  currentColor  keywords:

This works for border color too:

But suppose you’d want to have a semi-transparent color. When setting colors normally you would simply use  rgba()  to specify the transparency:

But this does not work for inherit or currentColor since rgba does not accept these keywords. But with a little trickery we can use the  :before  pseudoelement to get the same effect:

Cool :-)

This entry was posted in Development, Tips and tagged , . Bookmark the permalink.

One Response to Transparent CSS borders with the inherited color

  1. Morten says:

    Thanks – exactly what I was looking for an Accordion

Leave a Reply

Your email address will not be published. Required fields are marked *