EN
CSS - gradient border
3 points
In this article, we would like to show you how to create gradient border for HTML elements using CSS.
Quick solution:
xxxxxxxxxx1
.element-border {2
padding: 0.25rem; /* sets border width */3
background: linear-gradient(to right, lightgreen, green); /* sets border color */4
}5
6
.element-content {7
background: white; /* sets background color */8
}Note:
There's no such thing as gradient border in CSS.
In this solution, we use simple trick - create wrapper (
element-border) element with gradient background withelement-contentelement inside it. Theelement-contentelement blocks out most of theelement-borderbackground, leaving a thin line ofpaddingaround it.
In this example, we create gradient background for HTML element.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.element-border {7
padding: 10px; /* sets border width */8
background: linear-gradient(to right, lightgreen, green); /* sets border color */9
}10
11
.element-content {12
padding: 10px;13
background: white; /* sets background color */14
}15
16
</style>17
</head>18
<body>19
<div class="element-border">20
<div class="element-content">Some content here ...</div>21
</div>22
</body>23
</html>
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.gradient-border {7
--border-width: 10px; /* <------------ required */8
padding: 10px;9
margin: var(--border-width); /* <------------ required */10
position: relative; /* <------------ required */11
background: white; /* <------------ required */12
}13
14
.gradient-border:after {15
position: absolute; /* <------------ required */16
left: calc(-1 * var(--border-width)); /* <------------ required */17
top: calc(-1 * var(--border-width)); /* <------------ required */18
right: calc(-1 * var(--border-width)); /* <------------ required */19
bottom: calc(-1 * var(--border-width)); /* <------------ required */20
background: linear-gradient(to right, lightgreen, green); /* <------------ required */21
content: ''; /* <------------ required */22
z-index: -1; /* <------------ required */23
}24
25
</style>26
</head>27
<body style="padding: 5px">28
<div class="gradient-border">Some content here ...</div>29
</body>30
</html>
