A compact tile that uses a subtle gradient edge to add emphasis without full outlines.
HTML
<div class="border-gradient">
Edge Accent
</div>CSS
.border-gradient {
width: 200px;
padding: 2rem 0;
border-radius: 11px;
background: #ffffff;
color: #111827;
font-size: 13px;
text-align: center;
position: relative;
}
.border-gradient::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, #6366f1, #22d3ee);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
@media (prefers-color-scheme: dark) {
.border-gradient {
background: #020617;
color: #e5e7eb;
}
}Notes
- Border rendered without extra markup
- No layout shift
- Ideal for highlight containers
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.