html - How to make a transparent border using CSS? -

i'm trying client has blog.

she wanted semi transparent border. know that's possible making background. can't seem find logic/code behind kind of css technique banners. know how this? lot of because that's client's wanting achieve blog....

well if want transparent can use

border: 5px solid transparent; 

if mean opaque/transparent, can use

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

here, a means alpha, can scale, 0-1.

also might suggest use opacity same job well, difference result in child elements getting opaque too, yes, there work arounds rgba seems better using opacity.

for older browsers, declare background color using #(hex) fall back, if old browsers doesn't recognize rgba, apply hex color element.

demo

demo 2 (with background image nested div)

demo 3 (with img tag instead of background-image)

body {     background: url(http://www.desktopas.com/files/2013/06/images-1920x1200.jpg);    }  div.wrap {     border: 5px solid #fff; /* fall back, not used in fiddle */     border: 5px solid rgba(255, 255, 255, .5);     height: 400px;     width: 400px;     margin: 50px;     border-radius: 50%; }  div.inner {     background: #fff; /* fall back, not used in fiddle */     background: rgba(255, 255, 255, .5);     height: 380px;     width: 380px;     border-radius: 50%;      margin: auto; /* horizontal center */     margin-top: 10px; /* vertical center ... yea know, that's                           manually calculated*/ } 

note (for demo 3): image scaled according height , width provided make sure doesn't break scaling ratio.