Creating semi-transparent borders

Question

I'm trying to create semi-transparent borders like on this screenshot. I could only achieve this.

How to make the borders look like those on the screenshot?

Answer 1

There is a CSS3 property for the background that you can use in order to have a semi-transparent borders that stay outside the background of the element. It's called background-clip. By default its property is background-clip: border-box;. In you case you should probably use:

background-clip: padding-box;

That way the background will touch the borders but will not cover them so they will stay semi-transparent.

Reference: http://www.w3schools.com/cssref/css3_pr_background-clip.asp

Another options is using box-shadow in stead of border. For example:

element { box-shadow: 0 0 0 5px rgba(255, 255, 255, .5; }

It will have the same effect.

Answer 2

you dont. you just create an element behind your box and style it to look like a border:

body{
    background:url(http://fc07.deviantart.net/fs70/f/2013/174/3/e/recycled_texture_background_by_sandeep_m-d6aeau9.jpg) 1000px 1000px;
}
.boxContainer{
    width:500px;
    height:200px;
    display:block;    
    margin:0 auto;
    position:relative;
}
.boxContainer .border{
    width:100%;
    height:100%;
    display:block;
    background:white;
    opacity:0.3;
    border-radius:10px;
    position:absolute;
}
.boxContainer .box{
    display:block;
    margin:10px;
    width:calc(100% - 20px);
    height:calc(100% - 20px);
    background:#EEEEEE;
    position:absolute;
    border-radius:5px;
}

<div class="boxContainer">
    <div class="border"></div>
    <div class="box"></div>
</div>

UPDATE:

here is an example of how it would look on your website:

Fiddle