Você pode definir uma opacidade da borda no CSS?

Existe uma maneira CSS direta de tornar a borda de um elemento semitransparente com algo assim?

border-opacity: 0.7;

Caso contrário, alguém tem uma idéia de como eu poderia fazer isso sem usar imagens?

Infelizmente, o opacityelemento torna o elemento inteiro (incluindo qualquer texto) semi-transparente. A melhor maneira de tornar a borda semi-transparente é com o formato de cor rgba. Por exemplo, isso daria uma borda vermelha com 50% de opacidade:

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

O problema com essa abordagem é que alguns navegadores não entendem o rgbaformato e não exibirão nenhuma borda se esta for a declaração inteira. A solução é fornecer duas declarações de borda. O primeiro com uma opacidade falsa, e o segundo com o real. Se um navegador for capaz, ele usará o segundo, se não, ele usará o primeiro.

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

A primeira declaração de borda terá a cor equivalente a uma borda vermelha opaca de 50% sobre um fundo branco (embora qualquer elemento gráfico abaixo da borda não seja exibido).

UPDATE: Adicionei "background-clip: padding-box;" para esta resposta (de acordo com a sugestão do SooDesuNe nos comentários) para garantir que a borda permaneça transparente mesmo se uma cor sólida de fundo for aplicada.

É fácil, use uma sombra sólida com deslocamento 0:

#foo {
  border-radius: 1px;
  box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);       
}

Além disso, se você definir um raio de borda para o elemento, ele fornecerá bordas bastante arredondadas

jsFiddle Demo

Como outros já mencionaram: CSS-3 diz que você pode usar a rgba(...)sintaxe para especificar uma cor de borda com um valor de opacidade (alfa).

Aqui está um exemplo rápido, se você quiser conferir.

• Funciona no Safari e no Chrome (provavelmente funciona em todos os navegadores de webkit).

• Funciona no Firefox

• Duvido que funcione no IE, mas suspeito que exista algum filtro ou comportamento que o faça funcionar.

Há também esta postagem de stackoverflow , que sugere alguns outros problemas - a saber, que a borda é renderizada sobre qualquer cor de fundo (ou imagem de fundo) que você especificou; limitando assim a utilidade da borda alfa em muitos casos.

Se você verificar sua codificação CSS com o validador W3C, verá se o seu código CSS é aceitável, mesmo se funcionou nos principais navegadores.

Criando uma borda transparente via CSS, conforme escrito acima,

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

não é aceito pelos padrões W3C, nem mesmo para CSS3. Eu usei o validador de entrada direta com o seguinte código CSS,

.test { border: 1px solid rgba(255, 0, 0, .5); }

Os resultados foram,

Erro de valor: borda Muitos valores ou valores não são reconhecidos: 1px rgba sólido (255,0,0,0.5)

Infelizmente, o valor alfa (a letra "a" no final de "rgb") não é aceito pelo W3C como parte dos valores de cores da borda ainda. Eu me pergunto por que não é padronizado, pois funciona em todos os navegadores. O único problema é se você deseja seguir os padrões do W3C ou se afastar dele para criar algo em CSS.

Para usar o validador CSS online do W3C / entrada direta .

Sempre é uma boa ideia usar um validador para verificar seu trabalho; isso realmente ajuda a encontrar erros pequenos ou até grandes na codificação, quando você fica vesgo após horas de trabalho de codificação.

* Não tanto quanto eu sei que não há o que eu faço normalmente nesse tipo de circunstâncias, é criar um bloco abaixo com um tamanho maior ((tamanho de borda * 2) + tamanho original) e torná-lo transparente usando

filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;

aqui está um exemplo

#main{
    width:400px;
    overflow:hidden;
    position:relative;
}
.border{
    width:100%;
    position:absolute;
    height:100%;
    background-color:#F00;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}
.content{
    margin:15px;/*size of border*/
    background-color:black;
}
<div id="main">
    <div class="border">
    </div>
    <div class="content">
        testing
    </div>
</div>

Atualizar:

Esta resposta está desatualizada, pois, afinal de contas, essa pergunta tem mais de 8 anos. Hoje, todos os navegadores atualizados suportam rgba, sombras de caixa e assim por diante. Mas este é um exemplo decente de como era há mais de 8 anos.

Como uma solução alternativa que pode funcionar em alguns casos: altere border-stylepara dotted.

Ter grupos alternados de pixels entre a cor do primeiro plano e a cor do plano de fundo não é o mesmo que uma linha contínua de pixels parcialmente transparentes. Por outro lado, isso requer significativamente menos CSS e é muito mais compatível em todos os navegadores, sem nenhuma diretiva específica.

Outras respostas tratam do aspecto técnico do problema de opacidade da borda, enquanto eu gostaria de apresentar um hack (apenas CSS e HTML puro). Basicamente, crie uma div de contêiner, com uma div de borda e, em seguida, a div de conteúdo.

<div class="container">
  <div class="border-box"></div>
  <div class="content-box"></div>
</div>

E então o CSS: (defina a borda do conteúdo como none, cuide do posicionamento para que a espessura da borda seja contabilizada)

.container {
  width: 20vw;
  height: 20vw;
  position: relative;
}
.border-box {
  width: 100%;
  height: 100%;
  border: 5px solid black;
  position: absolute;
  opacity: 0.5;
}
.content-box {
  width: 100%;
  height: 100%;
  border: none;
  background: green;
  top: 5px;
  left: 5px;
  position: absolute;
}

Não, não há como definir apenas a opacidade de uma borda com css.

Por exemplo, se você não conhecia a cor , não há como alterar apenas a opacidade da borda usando simplesmente rgba().

tente isto:

<h2>Snippet for making borders transparent</h2>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.
    Mauris massa. Vestibulum lacinia arcu eget nulla. <b>Lorem ipsum dolor sit amet, consectetur adipiscing elit</b>. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim
    lacinia nunc. <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor.
    <i>Lorem ipsum dolor sit amet, consectetur adipiscing elit</i>. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod
    in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis
    turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. <b>Nam nec ante</b>. Suspendisse in justo eu magna luctus suscipit. Sed lectus. <i>Sed convallis tristique sem</i>.
    Integer euismod lacus luctus magna. <b>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos</b>. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum
    ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc,
    viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. <b>Suspendisse in justo eu magna luctus suscipit</b>. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. </p>
</div>
<div id="transparentBorder">
  This &lt;div&gt; has transparent borders.
</div>

E aqui vem o nosso CSS mágico ..

* {
  padding: 10pt;
  font: 13px/1.5 Helvetica Neue, Arial, Helvetica, 'Liberation Sans', FreeSans, sans-serif;
}

b {
  font-weight: bold;
}

i {
  font-style: oblique;
}

H2 {
  font-size: 2em;
}

div[id='transparentBorder'] {
  height: 100px;
  width: 200px;
  padding: 10px;
  position: absolute;
  top: 40%;
  left: 30%;
  text-align: center;
  background: Black;
  border-radius: 4px;
  border: 10pt solid rgba(0, 0, 0, 0.5);
  -moz-background-clip: border;
  /* Firefox 3.6 */
  -webkit-background-clip: border;
  /* Safari 4? Chrome 6? */
  background-clip: border-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  -moz-background-clip: padding;
  /* Firefox 3.6 */
  -webkit-background-clip: padding;
  /* Safari 4? Chrome 6? */
  background-clip: padding-box;
  /* Firefox 4, Safari 5, Opera 10, IE 9 */
  text-align: center;
  margin: 0;
  color: #fff;
  cursor: pointer;
}

Confira a demonstração aqui.