|
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
Currently Active Property:
Gradient Border: linear-gradient(to right, green, lightgreen)
Method 1: Border-Image with GradientThis 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 OverlayThis 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>
Output:
|
