Como faço uma borda transparente com CSS?

Eu tenho o liseguinte estilo:

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

Quando eu passo o mouse sobre a liborda, aparece sem fazer o lideslocamento do. É possível ter uma 'borda' que não é visível?

Você pode usar "transparente" como cor. Em algumas versões do IE, isso aparece em preto, mas não testei desde os dias do IE6.

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

Muitos de vocês devem estar chegando aqui para encontrar uma solução para bordas opacas em vez de transparentes. Nesse caso, você pode usar rgba, onde asignifica alpha.

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

Demo

Aqui, você pode mudar o opacitydo borderde0-1

Se você simplesmente quer uma borda transparente completa, a melhor coisa a usar é transparent, comoborder: 1px solid transparent;

Você pode remover a borda e aumentar o preenchimento:

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

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

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

ei, esta é a melhor solução que já experimentei .. este é CSS3

use a seguinte propriedade para seu div ou em qualquer lugar que você queira colocar fronteira transparente

por exemplo

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

isso vai funcionar ..

Sim, você pode usar border: 1px solid transparent

Outra solução é usar outlineao passar o mouse (e definir a borda como 0), o que não afeta o fluxo do documento:

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

NB. Você só pode definir o contorno como uma propriedade sharthand, não para lados individuais. Ele deve ser usado apenas para depuração, mas funciona bem.

Já que você disse em um comentário que quanto mais opções você tiver, melhor, aqui está outra.

No CSS3, existem dois chamados "modelos de caixa" diferentes. Um adiciona a borda e o preenchimento à largura de um elemento de bloco, enquanto o outro não. Você pode usar o último especificando

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

Então, nos navegadores modernos, o elemento sempre terá a mesma largura. Ou seja, se você aplicar uma borda a ele ao pairar, a largura da borda não será adicionada à largura geral do elemento; a borda será adicionada "dentro" do elemento, por assim dizer. No entanto, se bem me lembro, você deve especificar widthexplicitamente para que isso funcione. O que provavelmente não é uma opção para você neste caso em particular, mas você pode manter isso em mente para situações futuras.

Esta entrada de blog pode ser emulada border-color: transparentno IE6. O exemplo a seguir inclui a correção "hasLayout" que é apresentada nos comentários de entrada do 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);
}

Certifique-se de que o border-colorusado na correção do IE6 não seja usado em nenhum lugar do .testDivelemento. Mudei o exemplo de pinkpara #FEFEFEporque parece ainda menos provável de ser usado.

A solução mais fácil para isso é usar rgbacomo a cor: border-color: rgba(0,0,0,0);Essa é uma cor de borda totalmente transparente.

Use propriedade transparente

border-color : transparent;