How to make a transparent border using CSS

Question

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

User · Accepted Answer

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.

User · Answer

use rgba  rgb with alpha  transparency    border  10px solid rgba 0 0 0 0 5      0 5 means 50  of opacity   The alpha transparency variate between 0  0  opacity   100  transparent  and 1  100 opacity   0  transparent

User · Answer

Using the  before pseudo-element  CSS3 s border-radius  and some transparency is quite easy   LIVE DEMO     lt div class  circle  gt  lt  div gt    CSS    circle   circle before    position absolute    border-radius 150px       circle      width 200px    height 200px    z-index 0    margin 11     padding 40px    background  hsla 0  100   100   0 6         circle before    content       display block    z-index -1      width 200px    height 200px     padding 44px    border  6px solid hsla 0  100   100   0 6        4px more padding   6px border   10 so           top -10px    left -10px       The  before attaches to our  circle another element which you only need to make  ok  block  absolute  etc     transparent and play with the border opacity

User · Answer

You can also use border-style  double with background-clip  padding-box  without the use of any extra  pseudo- elements  It s probably the most compact solution  but not as flexible as the others   For example    lt div class  circle  gt Some text goes here    lt  div gt    circle      width  100px      height  100px      padding  50px      border-radius  200px      border  double 15px rgba 255 255 255 0 7       background  rgba 255 255 255 0 7       background-clip  padding-box        If you look closely you can see that the edge between the border and the background is not perfect  This seems to be an issue in current browsers  But it s not that noticeable when the border is small

[html] How to make a transparent border using CSS?

Examples related to html

Examples related to css

Examples related to border