How can I add border radius for the gradient border?
Apr 9, 2022
Answers (2)
Add Answer
If you want to set the border radius with gradient border then you have to take div after and then set the border gradient.
Example:
.test-box {
position: relative;
padding: 10px 25px;
width: 250px;
text-align: center;
}
.test-box:after {
content: '';
position: absolute;
border: 5px solid transparent;
top: 0;
border-radius: 25px;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg,red,blue);
-webkit-mask: linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
}
You can try this code.
Review the below Image.
I hope this will help you.
You can add by using the below code,
.box {
border:10px solid;
border-image:linear-gradient(45deg,red,blue) 10;
}
I hope this will help you.
