A dashed motion border built with pure HTML and CSS that animates segmented border lines around an element. It enhances dynamic edge emphasis and interactive visual feedback without requiring JavaScript.
Usage
Use this component when interfaces require animated border styling, such as highlighted cards, call-to-action sections, interactive panels, or feature blocks that benefit from motion based emphasis.
Implementation
The effect is achieved using CSS dashed border styling combined with keyframe or transition based animation techniques, creating controlled movement along the element’s edges. Responsive rules ensure consistent scaling across screen sizes.
HTML
<div class="border-dashed">
Editable
</div>CSS
.border-dashed {
width: 200px;
padding:2rem;
border-radius: 11px;
background: #ffffff;
color: #111827;
text-align: center;
font-size: 13px;
border: 2px dashed #6366f1;
transition: border-color 150ms ease;
}
.border-dashed:hover {
animation: dashMove 1s linear infinite;
}
@keyframes dashMove {
to {
border-color: #22d3ee;
}
}
@media (prefers-color-scheme: dark) {
.border-dashed {
background: #020617;
color: #e5e7eb;
border-color: #818cf8;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Uses animated dashed border styling
- Enhances motion based edge visibility
- Fully responsive across breakpoints
- Suitable for cards and interactive sections
- Easy to customize dash spacing and animation speed
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.