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 · 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

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

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

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

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

Examples related to html

Examples related to css

Examples related to border