Dotted border with linear gradient

Question

I have a dotted border with a color code #664914. I would like to have this border fade with a black gradient towards the end. The current css is as below:

#div1{width:1000px;border-bottom:1px dotted #664914; margin: 5px auto 0;}

Is what am trying to achieve possible to achieve with css? If so how can i achieve this. I know my question could be quite obvious but am having a hard time trying to figure it out.

[CSS3 Gradient Borders](http://stackoverflow.com/questions/2717127/css3-gradient-borders) — Antony, Feb 12 '13 at 15:47
[Here](http://css-tricks.com/examples/GradientBorder/) is good tutorial about gradients in borders — AnilkaBobo, Feb 12 '13 at 15:48

score 0 · Answer 1 · answered Feb 12 '13 at 15:46

You can with border-image, here's a good set of examples:

http://css-tricks.com/examples/GradientBorder/

The basic idea:

.top-to-bottom {
    border-width:3px;
    -webkit-border-image: 
        -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
    -webkit-border-image: 
        -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -o-border-image:
        -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;
    -moz-border-image:
       -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;    
}

Keep in mind, this isn't supported in IE - http://caniuse.com/#search=border-image

This doesn't generate a dotted border, just a gradient. – adriaan Feb 12 '20 at 14:03 — adriaan, Feb 12 '20 at 14:03

Dotted border with linear gradient

1 Answers1