NewCSS + small JS · SVG stroke · stroke-dashoffset

Trace

A line draws itself all the way round the border, following the element's own corners.

A free border draw animation in HTML and CSS (with a few lines of JavaScript). Also known as line drawing border, SVG stroke border, outline trace hover or animated outline.

Class: .CCTrace
Weight: 1.5 KB
Needs: CSS + a few lines of JS
Best for: Cards, inputs, secondary buttons

Tune it

Every snippet on this page follows these settings.

How the Trace hover effect works

Script adds an SVG outline sized to the element, with the same corner radius.
It works out the outline's length and hides the stroke with a dash that long.
On hover stroke-dashoffset runs to 0, so the line draws itself round; on leave it undraws.

Add it to your site

Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
Add the classes. For example <button class="CCButton CCTrace">.
Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Trace on button, dropdown, card, input, tabs, toggle.

More ways to use it

The same class on nav bar, modal, image card, badge.

The Trace code

The plain CSS and JavaScript behind the effect. Colours, speed and strength come from the --cc- custom properties; the snippets above bundle it with the component styles and your settings.

Show the CSS

.CCTrace { position: relative; }
.CCTrace .CCTrace-svg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.CCTrace .CCTrace-svg rect {
  fill: none;
  stroke: var(--cc-accent);
  stroke-width: calc(2px * var(--cc-intensity));
  stroke-linecap: round;
  stroke-dasharray: var(--cc-len) var(--cc-len);
  stroke-dashoffset: var(--cc-len);
  transition: stroke-dashoffset calc(.8s / var(--cc-speed)) cubic-bezier(.6, 0, .2, 1);
}
.CCTrace:is(:hover, :focus-visible, :focus-within) .CCTrace-svg rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .CCTrace .CCTrace-svg rect { transition: none; } }

Show the JavaScript

document.querySelectorAll(".CCTrace").forEach(function (el) {
  if (el.dataset.ccTrace) return; el.dataset.ccTrace = 1;
  var ns = "http://www.w3.org/2000/svg", svg = document.createElementNS(ns, "svg"), rect = document.createElementNS(ns, "rect");
  svg.setAttribute("class", "CCTrace-svg"); svg.setAttribute("aria-hidden", "true"); svg.appendChild(rect); el.appendChild(svg);
  function size() {
    var w = el.offsetWidth + 2, h = el.offsetHeight + 2, rad = Math.min(parseFloat(getComputedStyle(el).borderTopLeftRadius) || 0, h / 2, w / 2);
    rect.setAttribute("x", 1); rect.setAttribute("y", 1); rect.setAttribute("width", w - 2); rect.setAttribute("height", h - 2);
    rect.setAttribute("rx", rad); rect.setAttribute("ry", rad);
    el.style.setProperty("--cc-len", (2 * (w + h - 4) - (8 - 2 * Math.PI) * rad).toFixed(1));
  }
  size();
  if (window.ResizeObserver) new ResizeObserver(size).observe(el);
});

Pairs well with

Avoid on the same element Border Beam (border), Shimmer Border (border).

Browser support

Chrome & Edge	0+
Safari	0+
Firefox	0+

Older browsers show the element without the effect: nothing breaks.

Accessibility

The SVG is hidden from screen readers.
Draws on keyboard focus too.
Appears at once under reduced motion.

Performance

1.5 KB of code, no libraries.
Animates transforms, opacity and gradients, which browsers handle cheaply.
This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Trace

What is a border draw animation?

A line draws itself all the way round the border, following the element's own corners. Trace is a free border draw animation, also known as line drawing border or SVG stroke border, that works on buttons, dropdowns, cards, text inputs and more.

How do you make a border draw animation in CSS?

Script adds an SVG outline sized to the element, with the same corner radius. It works out the outline's length and hides the stroke with a dash that long. On hover stroke-dashoffset runs to 0, so the line draws itself round; on leave it undraws.

How do I add Trace to a button?

Add the class CCTrace next to CCButton, inside an element with the CCTheme class, then include the Trace CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Trace need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Trace?

Chrome and Edge 0+, Safari 0+ and Firefox 0+. Older browsers show the element without the effect, so nothing breaks.

Is Trace accessible?

The SVG is hidden from screen readers. Draws on keyboard focus too. Appears at once under reduced motion.

Can I use Trace in React, Tailwind, WordPress, Shopify, Webflow or Squarespace?

Yes. There's a ready-made React component and a Tailwind version on this page. On WordPress, Shopify, Webflow, Wix or Squarespace, paste the CSS into the site's custom code or custom CSS area, then add the class CCTrace to a button or block, and paste the JavaScript into the footer code area.

Is Trace free for commercial use?

Yes. It's free for personal and client projects, with no sign-up. Credit and a link back are appreciated but never required.