Using CSS alone, how can you have a Border-bottom gradient from Right to Left?

fbi666

New Member
I would like to know if it is possible using CSS alone to be able to do a border-bottom with gradient going from right to left and not from the center outwards.In my search for the answer, I have found a JSFiddle link which shows that it is possible to have a border gradient going from top to bottom which is transparent;Method One /* Using only background gradients */\[code\].one { width: 400px; padding: 20px 25px; border-top: 5px solid #000; margin: 40px auto; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent), -moz-linear-gradient(#000, transparent) ; background-image: -o-linear-gradient(#000, transparent), -o-linear-gradient(#000, transparent) ; background-image: linear-gradient(#000, transparent), linear-gradient(#000, transparent) ; -moz-background-size:5px 100%; background-size:5px 100%; background-position:0 0, 100% 0; background-repeat:no-repeat;}\[/code\]Method 2 /* Using pseudo-elements and background gradients */\[code\].two { position: relative; width: 400px; padding: 20px; border: 5px solid transparent; border-top-color: #000; margin: 40px auto;}.two:before,.two:after { content: ""; position: absolute; top: -5px; bottom: -5px; left: -5px; width: 5px; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent)); background-image: -webkit-linear-gradient(#000, transparent); background-image: -moz-linear-gradient(#000, transparent); background-image: -o-linear-gradient(#000, transparent); background-image: linear-gradient(#000, transparent);}.two:after { left: auto; right: -5px;}\[/code\]I do not understand how the above CSS is letting the page know the direction and I assume it is just a little, simple, under-looked edit, of which I cannot seem to find at this moment in time and therefore I am making this question to ask for some help.I would also like to know if this will work if the border is dashed or dotted?Thank you for any help and/or advice in advanced.Best Regards,Tim
 
Back
Top