This border pattern increases emphasis through contrast and thickness changes, without relying on color saturation or glow effects.
HTML
<div class="border-emphasis">
Emphasis
</div>CSS
.border-emphasis {
width: 200px;
padding: 2rem 0;
border-radius: 16px;
background: #ffffff;
color: #111827;
font-size: 12px;
text-align: center;
border: 1px solid #d1d5db;
transition: border-color 140ms ease, box-shadow 140ms ease;
}
.border-emphasis:hover {
border-color: #2563eb;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.3);
}
@media (prefers-color-scheme: dark) {
.border-emphasis {
background: #27272a;
color: #f4f4f5;
border-color: #3f3f46;
}
}Notes
- Emphasis without glow
- Hover-safe and subtle
- Good for cards and controls
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.