Drawing Border
A copy-paste borders & outlines component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Borders & OutlinesHTMLCSSany framework
Drawing Border
Copy into your project
HTML
<div style="position: relative; display: inline-block;">
<svg class="nuda-drawing-border" viewBox="0 0 200 80" fill="none" style="position: absolute; inset: 0; width: 100%; height: 100%;">
<rect class="nuda-drawing-border__rect" x="1" y="1" width="198" height="78" rx="12"
stroke="#6366f1" stroke-width="2"/>
</svg>
<div style="padding: 24px 32px; position: relative;">
Your content here
</div>
</div>CSS
/* Drawing Border
Border draws itself using SVG stroke-dashoffset.
Adjust dasharray to match your rect perimeter. */
.nuda-drawing-border {
overflow: visible;
}
.nuda-drawing-border__rect {
stroke-dasharray: 556;
stroke-dashoffset: 556;
animation: nuda-draw-border 1.5s ease-out forwards;
will-change: stroke-dashoffset;
}
@keyframes nuda-draw-border {
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.nuda-drawing-border__rect {
animation: none;
stroke-dashoffset: 0;
}
}How to use Drawing Border
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.