Bordure opacité 0.2

Bonjour à tous,

Premier post pour moi sur le forum.

Je souhaiterais rendre semi transparent, la bordure d'une div.

Voici un petit screen du design photoshop avec la bordure transparente (noir opacité à 20%):

http://artchitek.be/laurent/files/bordure_transparente_1.jpg

Et voici ce que j'ai pour l'instant en html/css:

http://artchitek.be/laurent/files/bordure_transparente_2.jpg

Voici le code css actuel de la div:

color: #4ab0ff;
width: 700px;
background: #425f73;
border-color: #000000;
border-width: 7px;
border-style:solid;
text-align: justify;
padding: 15px;
margin-left: auto; 
margin-right: auto;
margin-top: 15px;

J'ai trouvé la fonction opacity:0.2 qui permet de rendre transparent des éléments avec du css mais dans ce cas-ci, c'est toute la div (ainsi que le texte conetenu) qui devient opaque à 0,2.

Sauriez-vous m'aider à résoudre cela? Y a-t-il une fonction qui permet de rendre transparent uniquement la bordure?

Merci d'avance

Bonjour,

Cet effet de transparence appliquée à une bordure peut s'obtenir en utilisant RGBa de CSS3.
Son support est bon dans des navigateurs récents et pour IE toutes versions on bidouille avec un filtre Microsoft et les commentaires conditionnels... ou pas.

Un article complet de Raphaël: CSS3 : la transparence de couleur avec RGBa
Modifié par Igor (25 Dec 2009 - 17:22)