How do I make a transparent border with CSS?

Question

I have an li styled as follows:

li{
    display:inline-block;
    padding:5px;
    border:1px solid none;
}
li:hover{
    border:1px solid #FC0;         


        

Answer 1

Many of you must be landing here to find a solution for opaque border instead of a transparent one. In that case you can use rgba, where a stands for alpha.

.your_class {
    height: 100px;
    width: 100px;
    margin: 100px;
    border: 10px solid rgba(255,255,255,.5);
}

Demo

Here, you can change the opacity of the border from 0-1

---

If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;