094 — BorderBrew — Visual CSS Border Generator

Date: 2026-08-14 Difficulty: ⭐⭐ (Easy-Medium) Estimated Build Time: 1.5–2 days Category: design tools, css, developer tools

Problem

Crafting CSS border values by hand is fiddly. Developers and designers constantly tweak border-width, style (solid/dashed/dotted/double/groove/ridge/inset/outset), color, and border-radius — often switching between editor and browser to iterate. The newer border-image property (gradient borders, pattern borders) is even harder to compose manually — it requires slice values, fill modes, and gradient syntax that most developers don't memorize. Existing online generators are either limited to basic border styles, don't support gradient/pattern borders, lack multi-side individual controls, or are ad-heavy.

What's missing: a single, clean, client-side tool that handles basic borders, per-side customization, border-radius, gradient borders (via border-image), and outputs Tailwind-compatible classes — all with live preview and one-click copy.

Core Features

P0

1. Live Border Preview — A large preview element that updates in real-time. Users see the border applied to a sample card/box element.

2. Basic Border Controls — Sliders/inputs for:

   • Border width (0–20px)
   • Border style selector (solid, dashed, dotted, double, groove, ridge, inset, outset, none)
   • Border color (color picker)
   • All-sides toggle vs. individual side controls (top, right, bottom, left each with independent width/style/color)

3. Border-Radius Controls — Sliders for corner radius: uniform + individual corners (top-left, top-right, bottom-right, bottom-left). Live preview of rounded corners.

4. Gradient Border Generator — Toggle "gradient border" mode to switch from border-color to border-image: linear-gradient(...). Controls:

   • Two color stops with a color picker and angle dial (0–360°)
   • Generates the correct border-image + border-image-slice CSS

5. One-Click CSS Copy — Copy the complete border CSS to clipboard. Live code block updates as you edit.

6. Preset Gallery — 15–20 curated border presets (thin elegant, thick bold, dashed notification, gradient rainbow, double-frame, rounded pill, glowing border, etc.). Click to load.

P1 (if time permits)

1. Tailwind CSS Export — Copy as Tailwind utility classes (border-2, border-dashed, border-red-500, rounded-xl, or arbitrary values for gradients).

2. Outline Mode — Toggle between border and outline (non-layout-affecting border alternative).

3. Shareable URL — Encode border state in URL search params (no backend needed).

Target User

• Frontend developers building UI components who need quick border styling with correct CSS output.
• UI designers prototyping card, button, or container borders and wanting instant CSS.
• Indie hackers working on landing pages who want polished border effects without memorizing syntax.

Suggested Stack

• Client-side only — no database, no auth, no AI, no backend.
• Next.js 15 (App Router) + React 19 + TypeScript.
• Tailwind CSS v4 + Shadcn/ui for editor controls (sliders, color pickers, dropdowns, buttons).
• Pure CSS rendering for the preview element.
• localStorage for persistence (save custom presets).
• URL search params for shareable links.
• Vitest for unit tests (CSS generation functions, preset loading, URL encoding).
• Playwright for E2E (edit controls → verify preview → copy CSS).

Feasibility Gut-Check

No external API calls, no auth, no database, no background jobs. Entirely deterministic and client-side. The hardest part is the gradient border-image syntax generation (requires correct slice/fill values), which is well-documented.

Hard-Rule Pre-Filter (Self-Check)

• Effort ≤ ~24h — Pass (~14h)
• No billing + multi-tenant + customer-portal — Pass
• No background-job orchestration — Pass
• No 3+ OAuth/third-party integration flows — Pass (zero integrations)
• No drag-and-drop editors — Pass
• No realtime/WebSocket layers — Pass
• No media-processing pipelines — Pass

Verdict: Clears all hard rules. Proceed to backlog.

Differentiation Wedge

Gradient border (border-image) support + per-side controls + Tailwind CSS export + ad-free. Most generators only handle basic border shorthand and don't cover border-image gradients. The preset gallery with decorative/gradient borders provides instant inspiration that raw CSS property editors lack. Follows the proven BoxShadow (062) + GradientForge (078) CSS-generator pattern in the catalog.

Brainstorm Review

Scored 2026-08-14 — PROMOTED to Ready for Design

Decision: PROMOTE. Total ≥ 12 and Market Fit ≥ 3. All hard-rule pre-filters passed. Proven CSS-generator pattern in the catalog with clear differentiation (gradient border-image + per-side + Tailwind export).

🔗 Related ideas

None identified. BoxShadow (062) generates box-shadow values — a different CSS property. GradientForge (078) generates background-image: gradient() for backgrounds, not borders. SpacerScale (063) handles spacing units. BorderBrew's job-to-be-done (compose + export CSS border styles including gradient borders) is distinct from all existing PRDs.

Architecture Design Spec

Status: ✅ Design Complete — Ready for implementation. Architecture document: designs/094-BorderBrew-architecture.md C4 Container diagram: diagrams/borderbrew-architecture.html Designed by: System Architect | Date: 2026-08-14