Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Gradient borders

  • Last Updated : 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:
border-image



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:
background-gradient




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!