Linear Color-Gradient Borders

CSS can be used to publish color gradients. One of its uses is to place a linear color-gradient border around images or other content divs.

Here is an example.

The above border is colored from top to bottom with a red to blue to green gradient. Here is the source code.

<div style="
   border:12px solid gray; 
   border-image:linear-gradient(red,blue,green) 1; 
   max-width:190px; padding:12px;">
Example div with a color-gradient border.
</div>

Notes:

1. The border:12px solid gray; declaration places a gray border around the div. The width may be changed. The gray color may be changed; it is the default color in case the next definition is not understood by the browser.

2. The border-image:linear-gradient(red,blue,green) 1; declaration places the linear gradient colors. In the example, the colors are red,blue,green. Those colors may be changed.

   The example is intended to be presented as simple as possible. It works just fine. However, there are other things you can do with the CSS. The next 2 paragraphs are here in case you want to learn much more about the border-image definition.

   For the example, the CSS border-image property is used and specified as a color gradient rather than the URL of an image. To delve further into colors and images for borders, consult the Border Image page at MDN Web Docs.

   The digit 1 at the end of the border-image definition is named a slice. The slice is a complicated subject. The Border Image Slice page at MDN Web Docs provides the information a person needs for full understanding. Without a full understanding, use the digit 1 for linear color-gradient border and you'll be good.

3. The max-width and padding properties are unnecessary for the border. The declarations are in place for dimension and spacing considerations. You may add your own declarations.

Gradient colors can be used to make pretty, or otherwise emphasized, borders where those are appropriate.

(This content first appeared in Possibilities newsletter.)

Will Bontrager