122

I have an li styled as follows:

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

When I hover over the li the border appears, but the li's shift around. Is it possible to have the border appear without causing the element to shift? Almost like having an invisible border, and then on hover make it appear?

TylerH
  • 20,799
  • 66
  • 75
  • 101
William Calleja
  • 4,055
  • 11
  • 41
  • 51

9 Answers9

125

You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

Douglas
  • 36,802
  • 9
  • 76
  • 89
  • 3
    Well it worked on ie8, Mozilla, Opera and Chrome, good enough for me, I didn't try it out on Safari but I don't mind safari much. thanks a lot! – William Calleja Mar 24 '10 at 10:36
  • 6
    Yeah, it's specifically IE6 that this doesn't work in. IE7 is OK. – bobince Mar 24 '10 at 11:18
  • 1
    This hasn't worked for me unfortunately. I've ended up using pseudo after elements made entirely out of borders... what a mess! – Alex Sep 23 '14 at 15:15
63

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;

Matt Ellen
  • 11,268
  • 4
  • 68
  • 90
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • And you can use this tool to convert from hex to rgba colour... http://www.hexcolortool.com ... where you can optionally specify the hex colour in the URL, like so... http://www.hexcolortool.com/#ffcc00 – clayRay Aug 07 '17 at 01:31
36

You could remove the border and increase the padding:

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}
<ul>
  <li>Hovering is great</li>
</ul>
leonheess
  • 16,068
  • 14
  • 77
  • 112
Matt Ellen
  • 11,268
  • 4
  • 68
  • 90
  • 1
    Well this worked like a charm, I just wondered if there was a cleaner way how to do it? if it was at all possible to have an invisible border? thanks again for the suggestion. – William Calleja Mar 24 '10 at 10:33
  • 3
    This sounds like a more compatible solution to me – NibblyPig Mar 24 '10 at 10:37
  • Just realised the code works opposite to how you need! Fixed. Also, I'd go with the transparent colour. I just didn't know about it :D – Matt Ellen Mar 24 '10 at 11:02
  • Decrease border and increase padding is of no use if you want, for example (my case), a fully clickable `` box. The border belongs to the element (hence clickable), while padding belongs to the parent. – Nico May 26 '14 at 10:38
  • Could this work without `display: inline-block;` with a little modification? – fmnijk Mar 10 '21 at 01:36
  • Yes, i just copied that from the OP – Matt Ellen Mar 10 '21 at 05:26
19

hey this is the best solution I ever experienced.. this is CSS3

use following property to your div or anywhere you wanna put border trasparent

e.g.

div_class { 
 border: 10px solid #999;
 background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}

this will work..

antyrat
  • 27,479
  • 9
  • 75
  • 76
Raau
  • 191
  • 1
  • 2
4

Yep, you can use border: 1px solid transparent

Another solution is to use outline on hover (and set the border to 0) which doesn't affect the document flow:

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

NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.

DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
3

Since you said in a comment that the more options you have, the better, here's another one.

In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;

Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the width explicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.

Community
  • 1
  • 1
ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
  • This may be one use case for a transparent border - instead of applying a border on hover, change its color from transparent to something you can see. – DaveWalley Jan 23 '14 at 18:09
2

Use transparent property 

border-color : transparent;
Daniel Puiu
  • 962
  • 6
  • 21
  • 29
Prabesh Guragain
  • 31
  • 2
2

This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:

/* transparent border */
.testDiv {
    width: 200px;
    height: 200px;
    border: solid 10px transparent;
}
/* IE6 fix */
*html .testDiv {
    zoom: 1;
    border-color: #FEFEFE;
    filter: chroma(color=#FEFEFE);
}

Make sure that the border-color used in the IE6 fix is not used anywhere in the .testDiv element. I changed the example from pink to #FEFEFE because that seems even less likely to be used.

Sonny
  • 8,204
  • 7
  • 63
  • 134
0

The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.

Jake Wilson
  • 88,616
  • 93
  • 252
  • 370