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:
<!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">
w3wiki
</h1>
<b>Gradient Borders</b>
<div class="border">
<div class="inner">
w3wiki 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:
Gradient borders
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)