How to add a transparent border to a heading?

Answer 1

h1,h2,h3,h4,h5,h6{border:solid rgba(100,100,100,.3)}

Answer 2

https://code.sololearn.com/W1we0cXvR9R2/?ref=app

Answer 3

@VH solution is for semi-transparent border...

Transparent border make me thinking 1> that's same as no border, and 2> you can imagine a kind of inner border transparent :
https://code.sololearn.com/W5zC8CyAZ5S0/#html

Answer 4

@Tomasz Jagus:

You haven't enough study my code... You need to set some padding, else you don't have any "transparent inner border" :P

[ EDIT ]

I make a mistake, sorry... I have missread your answer ^^
But anyway, for @VH answer ( using rgba for border-color ), you don't need to set background-clip to padding-box, as this is the default value ;)

Answer 5

First use rgba to define border colour and then use background-clip: padding-box.