43

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?

john2x
  • 22,546
  • 16
  • 57
  • 95

7 Answers7

57

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);
vhs
  • 9,316
  • 3
  • 66
  • 70
daniel.tosaba
  • 2,503
  • 9
  • 36
  • 47
  • 3
    underrated answer this is probably a much better solution even if it isn't technically a border EDIT: I just saw the year – Joss Bird Dec 28 '17 at 22:31
  • also note the additional parameter "spread radius" which can be used for changing the size of the fading area, e.g. `box-shadow: 0 30px 40px 40px rgba(0,0,0,.1);`, also see https://conceptboard.github.io/box-shadow-spread-examples/ – klues Feb 08 '21 at 10:32
28

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:

Hope that helps.

Community
  • 1
  • 1
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Is this a little misleading? As far as I am aware, text colours can not be gradients. – Mild Fuzz Jun 05 '13 at 10:51
  • @MildFuzz - eh? I don't think this question or answer mentions text colours anywhere. It's all about border colours. – Spudley Jun 05 '13 at 10:57
  • When I read it, I read it as suggesting that all colours in CSS3 can be gradients. Do you not think that it could be make more clear? – Mild Fuzz Jun 05 '13 at 11:08
  • I guess it could. Feel free to edit it to clarify if you like. :-) – Spudley Jun 05 '13 at 11:11
5

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

stackunderflow
  • 422
  • 2
  • 5
  • 19
5

A simple border fade

When you give different parameters for different borders, the browser will try to do its best and interpolate between them somehow. You can use this behaviour to generate certain faded borders, like this one:

https://codepen.io/dkellner/pen/rNpJwyB

 .your-element {
     border:1px solid black;
     border-left:150px solid transparent;
     border-right:150px solid transparent;
 }

It's not exactly what the op wanted but in many cases it's more than enough. And it looks cool. In the example you'll see another version where the 1px border is replaced to 3px, causing another cool effect like it was drawn with a stylus.

dkellner
  • 8,726
  • 2
  • 49
  • 47
2

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

Luzan Baral
  • 3,678
  • 5
  • 37
  • 68
2

for fading borders, I use the box-shadow CSS property

.box{
box-shadow: inset 0 0 10px #311b0b;
}
Om Fuke
  • 482
  • 1
  • 7
  • 14
1

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>
JSG
  • 390
  • 1
  • 4
  • 13