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:
xxxxxxxxxx1
.element-border {2
padding: 10px; /* sets border width */3
border-radius: 20px; /* sets border radius */4
background: linear-gradient(to right, lightgreen, green); /* sets border color */5
}6
7
.element-content {8
border-radius: 10px; /* sets internal shape */9
background: white; /* sets background color */10
}
In this example, we create gradient border using additional wrapping HTML element.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.element-border {7
padding: 10px; /* sets border width */8
border-radius: 20px; /* sets border radius */9
background: linear-gradient(to right, lightgreen, green); /* sets border colors */10
}11
12
.element-content {13
padding: 10px;14
border-radius: 10px; /* sets border radius */15
background: white;16
}17
18
</style>19
</head>20
<body>21
<div class="element-border">22
<div class="element-content">Some content here ...</div>23
</div>24
</body>25
</html>
In this example, we create gradient border using :after CSS pseudo selector.
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
border-radius: var(--border-width); /* <------------ required */12
background: white; /* <------------ required */13
}14
15
.gradient-border:after {16
position: absolute; /* <------------ required */17
left: calc(-1 * var(--border-width)); /* <------------ required */18
top: calc(-1 * var(--border-width)); /* <------------ required */19
right: calc(-1 * var(--border-width)); /* <------------ required */20
bottom: calc(-1 * var(--border-width)); /* <------------ required */21
border-radius: calc(2 * var(--border-width)); /* <------------ required */22
background: linear-gradient(to right, lightgreen, green); /* <------------ required */23
content: ''; /* <------------ required */24
z-index: -1; /* <------------ required */25
}26
27
</style>28
</head>29
<body style="padding: 5px">30
<div class="gradient-border">Some content here ...</div>31
</body>32
</html>
