How to set gradient border color in CSS?

Last Updated : 17 Apr, 2024

CSS Gradient Color applies two or more colors by smoothly transitioning between the colors. In this article, we will see how to set the Gradient Border Color of an element using CSS. Gradient Border Color enhances the styling of the element.

Set the Gradient Border using border-image property

The border-image property allows you to use an image or a gradient as the border of an element. You can specify a linear gradient as the border image to create a gradient border effect.

Example 1: In this example, we will set the gradient border to the element.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Gradient Border</title>

    <style>
        .GFG {
            
            /* Set initial border color and width */
            border: 10px solid transparent;
            
            /* Gradient border */
            border-image: linear-gradient(to right, #f00, #00f);
            border-image-slice: 1;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        Welcome to GeeksforGeeks
    </div>
</body>

</html>

Output:

Gradient-color

Example 2: In this example, we will set the gradient border to the element with different border widths.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Gradient Border</title>

    <style>
        .GFG {
            
            /* Set initial border color and width */
            border-width: 4px 6px 8px 10px;
            border-style: solid;
            border-color: transparent;
            
            /* Gradient border */
            border-image: linear-gradient(to right, #f00, #00f);
            border-image-slice: 1;
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="GFG">
        Welcome to GeeksforGeeks
    </div>
</body>

</html>