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?
This question is related to
css
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
<div class = 'bbdr_rfade_1'>Oh I am so going to not up-vote this guy...</div>
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
<div class="border_gradient">
<img src="image.png" />
</div>
though it may not give the same exact border, it will some gradient looks on the border.
source: CSS3 Borders
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);
How to fade borders with CSS:
<div style="border-style:solid;border-image:linear-gradient(red, transparent) 1;border-bottom:0;">Text</div>
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
Source: Stackoverflow.com