¿Cómo hago un borde transparente con CSS?

Yo tengo un li estilo de la siguiente manera:

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

Cuando coloco el cursor sobre el li, aparece el borde sin licambiar de lugar. ¿Es posible tener un "borde" que no sea visible?

Puede utilizar "transparente" como color. En algunas versiones de IE, aparece en negro, pero no lo he probado desde los días de IE6.

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

Muchos de ustedes deben estar aterrizando aquí para encontrar una solución para el borde opaco en lugar de uno transparente. En ese caso, puede usar rgba, where asignifica alpha.

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

Manifestación

Aquí, se puede cambiar la opacityde la borderde0-1

Si simplemente desea un borde transparente completo, lo mejor que puede usar es transparent, comoborder: 1px solid transparent;

Puede eliminar el borde y aumentar el relleno:

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

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

oye, esta es la mejor solución que he experimentado ... esto es CSS3

use la siguiente propiedad en su div o en cualquier lugar donde desee poner el borde transparente

p.ej

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

esto funcionará ...

Sí, puedes usar border: 1px solid transparent

Otra solución es usar outlineon hover (y establecer el borde en 0) que no afecta el flujo del documento:

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

NÓTESE BIEN. Solo puede establecer el contorno como una propiedad sharthand, no para lados individuales. Solo está destinado a ser utilizado para depurar, pero funciona bien.

Como dijiste en un comentario que cuantas más opciones tengas, mejor, aquí tienes otra.

En CSS3, hay dos "modelos de caja" diferentes. Uno agrega el borde y el relleno al ancho de un elemento de bloque, mientras que el otro no. Puede utilizar este último especificando

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

Luego, en los navegadores modernos, el elemento siempre tendrá el mismo ancho. Es decir, si le aplica un borde al pasar el mouse, el ancho del borde no se agregará al ancho total del elemento; el borde se agregará "dentro" del elemento, por así decirlo. Sin embargo, si recuerdo correctamente, debe especificar widthexplícitamente para que esto funcione. Lo cual probablemente no sea una opción para usted en este caso particular, pero puede tenerlo en cuenta para situaciones futuras.

Esta entrada de blog tiene una forma de emular border-color: transparenten IE6. El siguiente ejemplo incluye la corrección "hasLayout" que aparece en los comentarios de la entrada del blog:

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

Asegúrese de que el border-colorutilizado en la corrección de IE6 no se utilice en ninguna parte del .testDivelemento. Cambié el ejemplo de pinka #FEFEFEporque parece incluso menos probable que se use.

La solución más fácil para esto es usar rgbacomo color: border-color: rgba(0,0,0,0);Ese es un color de borde completamente transparente.

Usar propiedad transparente

border-color : transparent;