How to implement border border color gradient code in CSS

in CSS, if a border line has a width of n pixels, it can be set to n different colors.

In the code, we can define a solid line with a width of 7px: border:7px solid #C8C8C8; (do not care about the color set here, in Firefox later in the code will be overwritten by the newly set color)

If you set the color of the gradient at the same time on a four-sided border in border, as shown in the following code:

 After running the HTML file, we get the following effect:


The code assigns the colors we set automatically to top, right, bottom, and left, in a clockwise manner. If we only set 3 colors, then the result is obvious, directly assigned to the top, right, bottom the three direction of the border. Therefore, in order for the code to know that we are not going to set the border color according to this rule, you should set the gradient color for each direction of the border separately, with the following code:


The results of its implementation are as follows:


Note that the border color of the border is set outward, so the first color encoding is the outermost color, and the last color encoding is the inner color.