We are going to see how to add a border radius for the gradient border.
First of all, Create HTML in the index.html file.
If you want to set the border radius with a gradient border then you have to take div after and then set the border gradient.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>border radius gradient</title> </head> <body> <div class="border-box"> </div> </body> </html>
Now you add CSS in <style>…</style> tag in index.html file.
.border-box{ height: 350px; width: 100%; background: #ddd; position: relative; border-radius: 25px; } .border-box:after { content: ''; position: absolute; border: 5px solid transparent; top: 0; bottom: 0; left: 0; right: 0; border-radius: 25px; background: linear-gradient(45deg,red,blue); }
I have added a gradient background and border set 5px transparent in the div after.
So my output looks like this:
But I want to set the border-radius with a gradient border so I add this code in div after
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
Now my Border-Radius is in the gradient.
Review the below image.
I hope you guys found something useful ??