Home/ Questions/Q 6688275
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:23:10+00:00

http://jsfiddle.net/nicktheandroid/Fazsh/1/ The following creates a gradient border, this syntax is working for webkit, but

  • 0

http://jsfiddle.net/nicktheandroid/Fazsh/1/

The following creates a gradient border, this syntax is working for webkit, but this syntax is not working for Opera and Firefox. What is the proper syntax for Opera and Firefox?

-webkit-border-image: -webkit-linear-gradient(red, rgba(0, 0, 0, 0), blue) 1 100%;
-o-border-image:-o-linear-gradient(red, rgba(0, 0, 0, 0)) 1 100%;
-moz-border-image:-moz-linear-gradient(red, rgba(0, 0, 0, 0), blue) 1 100%;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    For Mozilla, border gradients are supported in this way:

    border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

    Opera might support it as 

    border-image: linear-gradient(red, rgba(0, 0, 0, 0)) 1 100%;'

    But I am not sure.

    • 0