Radiating Star

Gradient on the border

  • #css
∙ 2 min read ∙ ∙ Suggest changes on GitHub

Border image property

Putting the gradient border on an element is as simple as using the border-image property and passing a gradient definition with the slicing value.

.border-image {
    border-image: linear-gradient(to right, red, blue) 1;
}

This will result in a box looking like that:

Border width can be configured by border-width property, as with any border. The additional number parameter at the end allows configuring which parts of the border should be shown. In case of a single 1, the whole border wil be visible. You can change the vertical/horizontal visibility, or the standard top, right, bottom, left. There are also some other configurations possible. Just take a look at the border-image-slice property description on MDN.

The gradient border image only on the top and left edges:

.border-image {
    border-image: linear-gradient(to right, red, blue) 1 0 0 1;
}

Additional properties

You can change the outset of the border image with the border-image-outset property and giving it a length value.

With the border-image-repeat you can control how the edge region of the border’s image will behave. Will it stretch as a single element, repeat without any transformation, put space in between and so on.

Resources

Read more