Gradient borders

23 May, 2019
Gradient borders are not directly supported by using CSS. There are two methods to create gradient borders which are listed below:
Method 1: Using border-image with gradient: The border is created by using the size and color as transparent in the border property. The gradient is used to define the border-image property. The border-image-slice is set to 1 for a border to properly be displayed. This combination of properties creates a gradient border.
Syntax:
.border {
    width: 400px;
    border: 3px solid transparent;
    border-image: linear-gradient(to right, green, lightgreen);
    border-image-slice: 1;
    padding: 25px;
}
Example:
<!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: Setting the background as a gradient and overlaying the content with padding: This method involves wrapping the element on which the border is to be shown with an element with a normal gradient background. The content in the enclosing div is padded equally to the width of the border required background color of the page. This simulates a gradient border.
Syntax:
.border {
    width: 400px;
    position: relative;
    background: linear-gradient(to right, green, lightgreen);
    padding: 3px;
}
.inner {
    background: white;
    padding: 25px;
}

Example:
<!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>                    
Output:
Picked
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
REST API (Introduction)
Remove elements from a JavaScript Array
How to get character array from string in JavaScript?
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
How to Insert Form Data into Database using PHP ?