how can i make a transparent border using css?


I don't have much knowledge in CSS, so I would like to know how can I create a transparent border using CSS?

The purpose of this border is like, I need to show a border on hovering <li> but it displaces other elements on hover if i write code like this

li{
    display:inline-block;
    padding:10px;
}
li:hover{
    border:1px solid black;
}

Check issue fiddle here

So I believe adding a transparent border on <li>, will remove this bad effect


Asked by:- jaiprakash
2
: 2560 At:- 8/15/2017 8:54:13 AM
CSS HTML transparent-border







2 Answers
profileImage Answered by:- vikas_jk

Try this code , as suggested by Jakub here

li{
    display:inline-block;
    padding:10px;
}
li:hover{
    border:1px solid black;
    padding: 9px;
}
1
At:- 8/15/2017 12:28:27 PM


profileImage Answered by:- neena

You can also add transparent background using CSS on <li> and then on hover change the color of <li>

 li{
    display:inline-block;
    padding:10px;
    border: 1px solid transparent;
}
li:hover{
    border:1px solid black;
}

In the above solution we are keeping border width same, so when user will hover on any li, it will change only color of <li>

1
At:- 8/15/2017 3:36:38 PM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use