Border Draw
Interactive & Advanced · Static · pure CSS
Hover the word and a frame draws itself around it stroke by stroke, top then right then bottom then left, like a pen tracing a rectangle. Leave and it retracts in reverse; a faint corner-tick hint keeps the frame legible even at rest.
How it works
Border Draw is a static interactive & advanced text effect rendered entirely in CSS. It works on a single element — just add the .text-effect class, with no extra HTML.
Controls
Border Draw exposes 3 dedicated controls — Hue, Thickness and Draw Speed — on top of the shared type controls (font, weight, letter-spacing and case). Open it in the generator to tune every value live, then copy the updated CSS.
CSS
/* Border Draw — made with TEXT-FX · https://text-fx.app
* HTML: just put the class on any element.
* Font: 'Anton', sans-serif (load from Google Fonts).
*/
.text-effect {
font-family: 'Anton', sans-serif;
font-weight: 400;
letter-spacing: 2px;
text-transform: none;
}
.text-effect {
position: relative;
display: inline-block;
padding: 0.3em 0.55em;
cursor: pointer;
background-image: linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32)), linear-gradient(hsl(32 55% 64% / 0.32), hsl(32 55% 64% / 0.32));
background-repeat: no-repeat;
background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%;
background-size: 10px 3px, 3px 10px, 10px 3px, 3px 10px, 10px 3px, 3px 10px, 10px 3px, 3px 10px;
}
.text-effect::before,
.text-effect::after {
content: "";
position: absolute;
box-sizing: border-box;
width: 0%;
height: 0%;
border: 0 solid transparent;
pointer-events: none;
}
.text-effect::before {
top: 0;
left: 0;
border-top-width: 3px;
border-right-width: 3px;
border-top-color: hsl(32 82% 68%);
border-right-color: hsl(32 82% 68%);
transition: height 0.11s linear 0.22s, width 0.11s linear 0.33s;
}
.text-effect::after {
bottom: 0;
right: 0;
border-bottom-width: 3px;
border-left-width: 3px;
border-bottom-color: hsl(32 82% 68%);
border-left-color: hsl(32 82% 68%);
transition: width 0.11s linear 0.11s, height 0.11s linear 0s;
}
.text-effect:hover::before {
width: 100%;
height: 100%;
transition: width 0.11s linear 0s, height 0.11s linear 0.11s;
}
.text-effect:hover::after {
width: 100%;
height: 100%;
transition: width 0.11s linear 0.22s, height 0.11s linear 0.33s;
}
Pure CSS — just add the .text-effect class to any element.
- Category
- Interactive & Advanced
- Type
- Static
- Browser support
- Sequential :hover border draw via staggered width/height transitions on ::before/::after — faint corner ticks hint the frame at rest.
- Capabilities
- pure