This border style uses segmented outlines to visually group content without solid enclosure.
HTML
<div class="border-segmented">
Segmented
</div>CSS
.border-segmented {
width: 200px;
padding: 2rem 0;
border-radius: 14px;
background: #ffffff;
color: #111827;
font-size: 12px;
text-align: center;
position: relative;
}
.border-segmented::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
border: 1px dashed #cbd5f5;
pointer-events: none;
}
@media (prefers-color-scheme: dark) {
.border-segmented {
background: #27272a;
color: #f4f4f5;
}
.border-segmented::before {
border-color: #4f46e5;
}
}Notes
- Lightweight grouping
- Dashed outline without noise
- Useful for placeholders and zones
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.