About

A few examples of how to add border gradients to an element. For more information, CSS tricks has an article about border gradients or go to MDN to learn more about gradients in general.

To view this on TripleLog, click here.

border-image

If you do not need a border-radius, then adding a border-image is a simple way to add a gradient. Set the border width the usual way then add a border-image property witht the gradient followed by the number 1 (for the slice property).

Pseudo Element

You can add a pseudo element (:before) to the box and set the correct properties. If your layout is more complex, you may need to tweak some values to make everything line up right.

Wrapper Element

You can add a parent element with the desired gradient background. Again, adding this wrapper may cause issues with your layout and need to be adjusted.