Borders are a great way to add visual interest and structure to your website design. While solid borders are the most common, you can also create borders that have a gradient effect using CSS. In this article, we’ll walk through several different ways to create gradient borders using CSS, including examples you can use in your own projects.
1. border-image-source
HTML & CSS:
<head>
<style>
.example_1{
width: 50px;
height: 50px;
background: #283A43;
border: 10px solid;
border-image-slice: 1;
border-width: 5px;
border-image-source: linear-gradient(to bottom, #1FB4AB, #DBCF66);
}
</style>
</head>
<body>
<div class="example_1"></div>
</body>
Result:
Note: border-image-slice property is only suitable for creating border colors in rectangles with non-rounded corners. It is not compatible with the border-radius
2. Combination of ‘padding-box‘ and ‘border-box‘
<head>
<style>
.example_2{
background: linear-gradient(black, black) padding-box,
linear-gradient(to bottom, #E44D26, #BC1DD6) border-box;
border: 4px solid transparent;
height: 50px;
width: 50px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="example_2"></div>
</body>
Result:
3. Overlapping divs
<head>
<style>
.example_3{
background: linear-gradient(to bottom, #f00, #00f);
width: 60px;
height: 60px;
position: relative;
border-radius: 5px;
}
.example_3_inner{
position: absolute;
width: 50px;
height: 50px;
top: 5px;
left: 5px;
background:black;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="example_3">
<div class="example_3_inner"></div>
</div>
</body>
Result:
4. Use pseudo-element ::before
<head>
<style>
.example_4::after {
content: " ";
background: #061A25;
position: absolute;
top: 5px;
left: 5px;
z-index: 2;
width: 50px;
height: 50px;
border-radius: 5px;
}
.example_4{
position: relative;
z-index: 1;
width: 50px;
height: 50px;
background: linear-gradient(to bottom, #D4CC81, #D61D1D);
width: 60px;
height: 60px;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="example_4"></div>
</body>
Result:
In conclusion, add in gradient border is a fantastic way to add some personality and visual interest to your website’s design. We’ve seen 4 different examples of how you can use this technique to create different effects, but the possibilities are endless. By playing around with the gradient colors, direction, and position, you can create unique and eye-catching borders that make your website stand out. Plus, since it’s so easy to do, there’s no reason not to give it a try! So go ahead and experiment with this technique, and see how you can take your website’s design to the next level. Happy coding! 
ui pencil 
Leave a Reply