Example
CSS
.bordered {
border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
border-image-slice: 1;
}
HTML
<div class='bordered'>Border on all sides</div>
The above example would produce a border that comprises of 5 different colors. The colors are defined through a linear-gradient (you can find more information about gradients in the docs). You can find more information about border-image-slice property in the border-image example in same page.
(Note: Additional properties were added to the element for presentational purpose.)
You'd have noticed that the left border has only a single color (the start color of the gradient) while the right border also has only a single color (the gradient's end color). This is because of the way that border image property works. It is as though the gradient is applied to the entire box and then the colors are masked from the padding and content areas, thus making it look as though only the border has the gradient.
Which border(s) have a single color is dependant on the gradient definition. If the gradient is a to right gradient, the left border would be the start color of the gradient and right border would be the end color. If it was a to bottom gradient the top border would be the gradient's start color and bottom border would be end color. Below is the output of a to bottom 5 colored gradient.
If the border is required only on specific sides of the element then the border-width property can be used just like with any other normal border. For example, adding the below code would produce a border only on the top of the element.
border-width: 5px 0px 0px 0px;
Note that, any element that has border-image property won't respect the border-radius (that is the border won't curve). This is based on the below statement in the spec:
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’).
