Gradient Border Card
Card with beautiful gradient border using CSS pseudo-elements
Code
.gradient-border-card {
position: relative;
width: 300px;
height: 200px;
padding: 24px;
border-radius: 16px;
background: #fff;
overflow: hidden;
}
.gradient-border-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid transparent;
border-radius: 16px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="gradient-border-card"</span>>
<"attr-name"</span>>class</span>="tag"</span>>h3</span>>Gradient Border</"attr-name"</span>>class</span>="tag"</span>>h3</span>>
<"attr-name"</span>>class</span>="tag"</span>>p</span>>Card with gradient border effect</"attr-name"</span>>class</span>="tag"</span>>p</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>