Tweet Deixando uma bordar em uma div com 50% transparente com css

Deixando uma bordar em uma div com 50% transparente com css

HTML

<h2>Snippet for making borders transparent</h2>
<div id="transparentBorder">
This &lt;div&gt; has transparent borders.</div>​

CSS

*{
    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;
}​  

Veja um exemplo aqui