EN
CSS - gradient border with radius
8
points
In this article, we would like to show you how to create gradient border for HTML elements using CSS.
Quick solution:
.element-border {
padding: 10px; /* sets border width */
border-radius: 20px; /* sets border radius */
background: linear-gradient(to right, lightgreen, green); /* sets border color */
}
.element-content {
border-radius: 10px; /* sets internal shape */
background: white; /* sets background color */
}
Practical example
In this example, we create gradient border using additional wrapping HTML element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.element-border {
padding: 10px; /* sets border width */
border-radius: 20px; /* sets border radius */
background: linear-gradient(to right, lightgreen, green); /* sets border colors */
}
.element-content {
padding: 10px;
border-radius: 10px; /* sets border radius */
background: white;
}
</style>
</head>
<body>
<div class="element-border">
<div class="element-content">Some content here ...</div>
</div>
</body>
</html>
Alternative solution
In this example, we create gradient border using :after CSS pseudo selector.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.gradient-border {
--border-width: 10px; /* <------------ required */
padding: 10px;
margin: var(--border-width); /* <------------ required */
position: relative; /* <------------ required */
border-radius: var(--border-width); /* <------------ required */
background: white; /* <------------ required */
}
.gradient-border:after {
position: absolute; /* <------------ required */
left: calc(-1 * var(--border-width)); /* <------------ required */
top: calc(-1 * var(--border-width)); /* <------------ required */
right: calc(-1 * var(--border-width)); /* <------------ required */
bottom: calc(-1 * var(--border-width)); /* <------------ required */
border-radius: calc(2 * var(--border-width)); /* <------------ required */
background: linear-gradient(to right, lightgreen, green); /* <------------ required */
content: ''; /* <------------ required */
z-index: -1; /* <------------ required */
}
</style>
</head>
<body style="padding: 5px">
<div class="gradient-border">Some content here ...</div>
</body>
</html>