¿Cómo aplico opacidad a un borde?

[dalfeju]

Me gustaría aplicar opacidad a cierto borde de un div, lo pude hacer con el siguiente CSS:

Código CSS:

border: 1px solid rgba(0, 0, 0, .4);
 

Tomé como ejemplo el color negro, pero no necesariamente será el color que utilizaré. El problema es que noto que no funciona para las versiones inferiores a IE9: IE8 e IE7. ¿Existe otra alternativa? que no sea recurrir a un background.

[Naahuel]

Y me temo que no de esa manera. Lo que podés usar es un fallback. Los motores CSS aplican la última regla que encuentran y que comprenden. Entonces si usás esto:

Código CSS:

border: 1px solid #000000;
border: 1px solid rgba(0,0,0,0.4);
 

Los navegadores que no soporten rgba() aplicarán el anterior, que es un negro sólido en este caso. Esta es una buena práctica para asegurar que al menos no se rompan los estilos en otros navegadores. No se verá tan lindo y moderno, pero se verá bien y será funcional.

[javiandgo]

Si se declara la primera linea con un negro solido no estará haciendo nada. En este caso especifico para un color negro seria declarar la primera linea con un gris cercano a la opacidad dada por el rgba.

Por poner un ejemplo:

Código CSS:

border: 1px solid #F4F4F4;
border: 1px solid rgba(0,0,0,0.4);
 

[mariogl84]

Por añadir un poco más de leña al fuego: el negro con transparencia sólo es un gris en caso de tener un blanco debajo, ¿no? Si tuviera un rojo o un verde, el color resultante no sería un gris, sería otro.

Quizá lo más apropiado sea ver el contexto, ver qué color "final" resulta de la mezcla y poner ese color como fallback. Claro que eso atentaría directamente contra la reusabilidad. Con lo que la conclusión final es: ¡a ver si van muriendo pronto las versiones antiguas de IE!