Gradient Border Plugin (Tailwind)

CSS-only Tailwind CSS plugin that draws a real gradient stroke around any element using mask-composite, so the gradient follows the element's existing border-radius (rounded corners, pills, circles). Familiar Tailwind gradient syntax, no JavaScript, no SVG. By Florian Kiem (@flornkm).

gradient-border-plugin (flornkm/gradient-border-plugin) solves a long-standing CSS gap: native borders take only one color per side (hard corners), and background-clip tricks fill backgrounds but can't outline. The plugin produces a continuous gradient outline with a single utility class whose API mirrors Tailwind's built-in bg-linear-to-* gradient utilities. Source: GitHub flornkm/gradient-border-plugin, https://github.com/flornkm/gradient-border-plugin, 2026-06-12 Source: gradient-border.floriankiem.com, 2026-06-12

Current Version Snapshot

Source: npm registry; GitHub API, 2026-07-02

Install

Built for Tailwind CSS v4 using @utility definitions — a single import, no tailwind.config plugin registration: Source: gradient-border.floriankiem.com, 2026-06-12

npm i gradient-border-plugin   # or pnpm / yarn / bun

/* in your Tailwind stylesheet */
@import "gradient-border-plugin";

<div class="gradient-border gradient-border-from-blue-500 gradient-border-to-pink-300 rounded-lg" />

Utilities

Override --gradient-border directly for conic/radial/arbitrary gradients. Tunable CSS variables include --gradient-border-width (default 1px), --gradient-border-angle (to bottom), and --gradient-border-duration (4s, used by the animated variant). Tailwind v4 theme extension: add widths via @theme { --gradient-border-width-5: 5px; }. Source: GitHub flornkm/gradient-border-plugin, 2026-06-12

Why it matters

• Radius-aware — the mask-composite technique flows the gradient around the full perimeter and respects any border-radius, which the older border-image approach cannot do cleanly.
• Agent-friendly — the author's framing: "the easiest way for agents (and humans) to add border gradients via Tailwind" — a single class an LLM can emit instead of bespoke mask CSS. Source: X/@flornkm, 2026-04-29
• No runtime cost — pure CSS, no JS or SVG filters; ships as one import.

How it compares

• vs tailwindcss-border-gradients / tailwindcss-border-gradient-radius — those use border-image or layered background-clip and require tailwind.config registration (Tailwind v3); this plugin uses mask-composite, is Tailwind v4-native (@utility), and follows radius without extra markup.
• vs hand-rolled mask-composite CSS — same technique, packaged as familiar Tailwind utilities so it stays cn()-first per CSS UI Enforcement.
• v3 note — built for v4; v3 projects must copy the underlying CSS or pin a v3-compatible fork. Source: gradient-border.floriankiem.com, 2026-06-12

Launch thread: 1,369 likes, 1,725 bookmarks; demo video. The reviewed video shows the utility working across a pill button, gradient text-like border lettering, and an icon button with a soft animated perimeter, which is the right artifact to preserve because the effect is visual and easy to overclaim from README text alone. Source: X/@flornkm, 2026-04-29

---

Timeline

• 2026-07-02 | Deep-reviewed the local image and video artifact, repaired local media, and added the current version snapshot: gradient-border-plugin@1.1.3, repo HEAD 51df2f9, 148 stars, 1 fork. Source: X/@flornkm, 2026-04-29; Source: npm registry and GitHub API, 2026-07-02
• 2026-04-29 | Gradient border plugin open-sourced — "familiar syntax, CSS-only, works everywhere… easiest way for agents (and humans) to add border gradients via Tailwind." @flornkm, 1,366 likes / 1,719 bookmarks. Source: X/@flornkm, 2026-04-29
• 2026-06-12 | Wiki page created from React/Next bookmark absorption; resolved GitHub README + docs site (Tailwind v4 @utility, mask-composite). Source: GitHub flornkm/gradient-border-plugin + gradient-border.floriankiem.com, 2026-06-12