Fade borders in CSS

Question

I m using border-left  groove on an element but I want the border to  fade  into the background as it s about to end at the bottom    I hope I m making sense  How would I achieve something to that effect

User · Answer

Add this class css to your style sheet       border gradient   border  8px solid  000  -moz-border-bottom-colors  897048  917953  a18a66  b6a488  c5b59b  d4c5ae  e2d6c4  eae1d2  -moz-border-top-colors  897048  917953  a18a66  b6a488  c5b59b  d4c5ae  e2d6c4  eae1d2  -moz-border-left-colors  897048  917953  a18a66  b6a488  c5b59b  d4c5ae  e2d6c4  eae1d2  -moz-border-right-colors  897048  917953  a18a66  b6a488  c5b59b  d4c5ae  e2d6c4  eae1d2  padding  5px 5px 5px 15px  width  300px      set width to the width of your image  and use this html for image   lt div class  border gradient  gt           lt img src  image png    gt   lt  div gt    though it may not give the same exact border  it will some gradient looks on the border   source  CSS3 Borders

User · Answer

You can specify gradients for colours in certain circumstances in CSS3  and of course borders can be set to a colour  so you should be able to use a gradient as a border colour  This would include the option of specifying a transparent colour  which means you should be able to achieve the effect you re after   However  I ve never seen it used  and I don t know how well supported it is by current browsers  You ll certainly need to accept that at least some of your users won t be able to see it   A quick google turned up these two pages which should help you on your way    CSS3 Gradient Borders http   designshack co uk tutorials introduction-to-css3-part-2-borders   Hope that helps

User · Answer

I know this is old but this seems to work well for me in 2020    Using the border-image CSS property I was able to quickly manipulate the borders for this fading purpose  Note  I don t think border-image works well with border-radius    I seen someone saying that somewhere but for this purpose it works well  1 Liner  CSS   bbdr rfade 1        border  4px solid  border-image  linear-gradient 90deg  rgba 60 74 83 0 90   rgba 60 74 83  00   1  border-left none  border-top none  border-right none      HTML  lt div class    bbdr rfade 1  gt Oh I am so going to not up-vote this guy    lt  div gt

User · Answer

You could also use box-shadow property with higher value of blur and rgba   color to set opacity level  Sounds like a better choice in your case   box-shadow  0 30px 40px rgba 0 0 0  1

User · Answer

How to fade borders with CSS    lt div style  border-style solid border-image linear-gradient red  transparent  1 border-bottom 0   gt Text lt  div gt   Please excuse the inline styles for the sake of demonstration  The 1 property for the border-image is border-image-slice  and in this case defines the border as a single continuous region    Source  Gradient Borders

[css] "Fade" borders in CSS

Examples related to css