How to make a transparent border using CSS?

border, css, html

Solution

Well if you want fully transparent than you can use

border: 5px solid transparent;

If you mean opaque/transparent, than you can use

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

Here, `a` means alpha, which you can scale, 0-1.

Also some might suggest you to use `opacity` which does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but `rgba` seems better than using `opacity`.

For older browsers, always declare the background color using `#`(hex) just as a fall back, so that if old browsers doesn't recognize the `rgba`, they will apply the `hex` color to your element.

Demo

Demo 2 (With a background image for nested div)

Demo 3 (With an `img` tag instead of a `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 I know, that's 
                         manually calculated*/
}

Note (For Demo 3): Image will be scaled according to the height and width provided so make sure it doesn't break the scaling ratio.

Problem

I'm trying to do something like this for a client who has a blog. She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....

Original source

Related problems