¿Cómo hago un borde transparente con CSS?

101

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?

William Calleja
fuente

Respuestas:

107

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

Douglas
fuente
3
Bueno, funcionó en ie8, Mozilla, Opera y Chrome, lo suficientemente bueno para mí, no lo probé en Safari pero no me importa mucho Safari. ¡muchas gracias!
William Calleja
5
Sí, es específicamente IE6 en el que esto no funciona. IE7 está bien.
Bobince
Desafortunadamente, esto no me ha funcionado. Terminé usando pseudo elementos posteriores hechos completamente fuera de las fronteras ... ¡qué lío!
Alex
51

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;

Sr. Alien
fuente
Y puede usar esta herramienta para convertir de color hexadecimal a rgba ... hexcolortool.com ... donde opcionalmente puede especificar el color hexadecimal en la URL, así ... hexcolortool.com/#ffcc00
clayRay
32

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>

Matt Ellen
fuente
Bueno, esto funcionó como un encanto, solo me preguntaba si había una forma más limpia de cómo hacerlo. si fuera posible tener un borde invisible? gracias de nuevo por la sugerencia.
William Calleja
3
Esto me suena como una solución más compatible
NibblyPig
¡Acabo de darme cuenta de que el código funciona de manera opuesta a lo que necesita! Fijo. Además, iría con el color transparente. Simplemente no lo sabía: D
Matt Ellen
Disminuir el borde y aumentar el relleno no sirve de nada si desea, por ejemplo (mi caso), un <a/>cuadro en el que se pueda hacer clic . El borde pertenece al elemento (por lo tanto, se puede hacer clic), mientras que el relleno pertenece al padre.
Nico
13

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á ...

Raau
fuente
4

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.

Cabra descontento
fuente
¡Muchas gracias! cuantas más opciones tenga, mejor
William Calleja
3

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.

ЯegDwight
fuente
Este puede ser un caso de uso para un borde transparente: en lugar de aplicar un borde al pasar el mouse, cambie su color de transparente a algo que pueda ver.
DaveWalley
2

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.

Hijo
fuente
0

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.

Jake Wilson
fuente
0

Usar propiedad transparente

border-color : transparent;
Prabesh Guragain
fuente