This border pattern uses a gradient stroke to frame components and create visual emphasis without heavy backgrounds.
HTML
<div class="border-gradient">
Framed Content
</div>CSS
.border-gradient {
width: 200px;
padding: 2rem;
border-radius: 11px;
text-align: center;
background: #ffffff;
color: #111827;
position: relative;
}
.border-gradient::before {
content: "";
position: absolute;
inset: 0;
padding: 2px;
border-radius: inherit;
background: linear-gradient(135deg, #6366f1, #22d3ee);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
}
@media (prefers-color-scheme: dark) {
.border-gradient {
background: #020617;
color: #e5e7eb;
}
}Notes
- Modern gradient framing
- No layout shift
- Suitable for feature highlights
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.