Recently I wanted to have different elements surrounded by transparent borders.
For instance an ajax popup, similar with what facebook has, or a design element to look nicer.

The solution is having another div that is inside the one you already have with an opacity applyed to it.
The HTML:

  
 
  our content here,

The CSS:

.transparentBorder{border: 10px solid #363636;
    position: absolute; top: -10px; left: -10px; height: 100%; width: 100%;
    opacity: 0.34;filter:alpha(opacity=34);
    z-index: -10;
}
.normalDiv {position: relative; width: 500px; height: 300px; text-align: center; font-size: 13px; color; #363636;}

See the DEMO for transparent borders