Comment créer une bordure transparente avec CSS?

Vous pouvez utiliser “transparent” comme couleur. Dans certaines versions d’IE, cela apparaît comme noir, mais je ne l’ai pas testé depuis les jours IE6.

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

Beaucoup d’entre vous doivent arriver ici pour trouver une solution pour une bordure opaque plutôt que transparente. Dans ce cas, vous pouvez utiliser rgba , où a signifie alpha .

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

Démo

Ici, vous pouvez changer l’ opacity de la border de 0-1 à 0-1

Si vous voulez simplement une bordure transparente complète, la meilleure chose à faire est transparent , comme la border: 1px solid transparent;

Vous pouvez supprimer la bordure et augmenter le remplissage:

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

 
 
Hovering is great
  

Hé c’est la meilleure solution que j’ai jamais connu .. c’est CSS3

utiliser la propriété suivante à votre div ou n’importe où que vous voulez mettre la frontière trasparent

par exemple

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

cela fonctionnera ..

Ouais, vous pouvez utiliser la border: 1px solid transparent

Une autre solution consiste à utiliser le outline lors du survol (et à définir la bordure sur 0), ce qui n’affecte pas le stream de documents:

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

NB Vous ne pouvez définir le contour que comme une propriété unique, et non pour des côtés individuels. Il est uniquement destiné à être utilisé pour le débogage, mais fonctionne parfaitement.

Puisque vous avez dit dans un commentaire que plus vous avez d’options, mieux c’est, en voici une autre.

En CSS3, il existe deux différents “modèles de boîte”. L’une ajoute la bordure et le remplissage à la largeur d’un élément de bloc, tandis que l’autre ne le fait pas. Vous pouvez utiliser ce dernier en spécifiant

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

Ensuite, dans les navigateurs modernes, l’élément aura toujours la même largeur. Par exemple, si vous appliquez une bordure au survol, la largeur de la bordure n’appenda pas à la largeur totale de l’élément; la bordure sera ajoutée “à l’intérieur” de l’élément, pour ainsi dire. Cependant, si je me souviens bien, vous devez spécifier la width explicitement pour que cela fonctionne. Ce qui n’est probablement pas une option pour vous dans ce cas particulier, mais vous pouvez le garder à l’esprit pour les situations futures.

Cette entrée de blog permet d’émuler border-color: transparent dans IE6. L’exemple ci-dessous inclut le correctif “hasLayout” qui apparaît dans les commentaires de l’entrée de 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); } 

Assurez-vous que la border-color utilisée dans le correctif IE6 n’est utilisée nulle part dans l’élément .testDiv . J’ai changé l’exemple de pink en #FEFEFE parce que cela semble encore moins probable.

La solution la plus simple consiste à utiliser rgba comme couleur: border-color: rgba(0,0,0,0); C’est la couleur de la bordure entièrement transparente.