Gradient borders

Last Updated : 03 Apr, 2024

Creating visually appealing borders can significantly enhance the user experience on your website. One such technique is the use of gradient borders. Although CSS does not directly support gradient borders, there are two effective methods to achieve this:

Try It:

Gradient Border 1

Gradient Border 2

Gradient Border 3

See the Border

Currently Active Property:

Gradient Border: linear-gradient(to right, green, lightgreen)

Method 1: Border-Image with Gradient

This method involves using the border-image property in combination with a gradient. The border is defined with a transparent color and a specific size using the border property. The border-image property is then used to apply the gradient. To ensure the border is displayed correctly, the border-image-slice is set to 1.

Syntax:

.border {
    width: 400px;
    border: 3px solid transparent;
    border-image: linear-gradient(to right, green, lightgreen);
    border-image-slice: 1;
    padding: 25px;
}

Example:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>Gradient Borders</title> 
    
    <style> 
        .border { 
            width: 400px; 
            border: 3px solid transparent; 
            border-image: linear-gradient(to right, green, lightgreen); 
            border-image-slice: 1; 
            padding: 25px; 
        } 
    </style> 
</head> 

<body> 
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1> 
    
    <b>Gradient Borders</b> 
    
    <div class="border"> 
        GeeksforGeeks is a computer science portal with a huge 
        variety of well written and explained computer science 
        and programming articles, quizzes and interview questions. 
    </div> 
</body> 

</html>

Output:

Method 2: Gradient Background with Content Overlay

This method involves creating a gradient background on an element and overlaying the content with equal padding to the required border width. This gives the illusion of a gradient border. The background color of the page is used for the content overlay.

Syntax:

.border {
    width: 400px;
    position: relative;
    background: linear-gradient(to right, green, lightgreen);
    padding: 3px;
}
.inner {
    background: white;
    padding: 25px;
}

Example:

html

<!DOCTYPE html> 
<html> 

<head> 
    <title>Gradient Borders</title> 

    <style> 
        .border { 
            width: 400px; 
            position: relative; 
            background: linear-gradient(to right, green, lightgreen); 
            padding: 3px; 
        } 
        .inner { 
            background: white; 
            padding: 25px; 
        } 
    </style> 
</head> 

<body> 
    <h1 style="color: green"> 
        GeeksForGeeks 
    </h1> 
    
    <b>Gradient Borders</b> 
    
    <div class="border"> 
        <div class="inner"> 
            GeeksforGeeks is a computer science portal with 
            a huge variety of well written and explained 
            computer science and programming articles, 
            quizzes and interview questions. 
        </div> 
    </div> 
</body> 

</html>