How to make a transparent border using CSS?

Question

I can't seem to find the logic/code behind this kind of css techniques, so just drop your answer it would be a lot of help.

Answer 1

Ore Oh yes! You are right.

Answer 2

Do you mean translucent (semi-transparent) borders. Because fully transparent borders do not make much sense.

A translucent border can easily be achieved by giving the border-color a semi-transparent value and changing the background-clip to padding-box

https://code.sololearn.com/WJ9NRVR36wfk

Answer 3

Mitali That will create what looks like a inset box-shadow. Unless background-clip is set to padding-box.

Answer 4

Border-style:hidden;
The logic or reason behind this. It is useful in cases where u don't want to show a border around the text but still want the text in a particular confinement so that with browser or user changing text size may not affect your content. Eg. When an ad shows up the text may hide behind it but the border will help it not to hide n remain in it's confinement.

Answer 5

For transparency you can you

RGBA(0,0,0,0.6)

where A signifies Alpha

You can change the alpha value to 1 or decrease it...

Which will change transparency of an element

Answer 6

Just use rgba(r,g,b,a) in place of rgb(r,g,b) for transparency .

Eg:-
---------------------HTML-------------------------
<div id="myDiv"></div>
-----------------------CSS--------------------------
myDiv{
border:3px solid rgba(255,0,0,.5)

//This will give you half transparency

}

Answer 7

to make border transparent you can lower the value of a around zero in rgba
rgba(0,0,0,.2)

You can take any shades of colour just keep opacity low.