Rough Borders & Textures

Exploring non-standard border treatments for wireframe, grungy, and sketchy themes using SVG filters, border-image, and CSS techniques.

Token Reference: See Themes > Extensions for token documentation. Source: src/tokens/extensions/rough-borders.css

Proposed Border Tokens

New tokens to add rough/sketchy border styles to themes.

Token	Values
`--border-style`	`solid \| dashed \| rough \| sketchy \| none`
`--border-roughness`	`0 \| 1 \| 2 \| 3` (intensity level)

Technique 1: SVG Filter Displacement

Using feTurbulence + feDisplacementMap to create organic, hand-drawn edge effects.

Light (scale: 2)

Subtle wobble, good for subtle personality

Medium (scale: 4)

Noticeable roughness, sketchy feel

Heavy (scale: 8)

Very rough, torn paper effect

<filter id="rough-light"> <feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="2"/> <feDisplacementMap in="SourceGraphic" in2="noise" scale="2"/> </filter> .card { filter: url(#rough-light); }

Technique 2: Border Image Patterns

Using border-image with SVG patterns for hand-drawn border effects.

Sketchy Curves

Bezier curves for wobbly edges

Rough Dashes

Variable dash pattern

Marker Style

Hand-drawn marker strokes

.sketch-border { border: 8px solid transparent; border-image: url("data:image/svg+xml,...") 10 stretch; }

Technique 3: Mask Image Edges

Using mask-image to create torn or wavy edge effects.

Torn Edges

Irregular top and bottom edges

Wavy Edges

Smooth sine wave pattern

.torn-edge { mask-image: url("data:image/svg+xml,..."); mask-size: 100% 100%; }

Technique 4: CSS Gradient Borders

Using repeating gradients for dashed and dotted border patterns.

Gradient Dashes

Repeating linear gradient

Dot Border

Radial gradient dots

.dashed-border { background: repeating-linear-gradient(90deg, var(--color-border) 0, var(--color-border) 8px, transparent 8px, transparent 16px ) 0 0 / 100% 3px no-repeat, var(--color-surface); }

Technique 5: Box Shadow Effects

Using layered box-shadows for sketchy and offset effects.

Sketch Shadow

Layered offset shadows

Hard Offset

Brutalist solid shadow

.sketch-shadow { box-shadow: 3px 3px 0 -1px var(--color-surface), 3px 3px 0 0 var(--color-border), 6px 6px 0 -1px var(--color-surface), 6px 6px 0 0 var(--color-border); }

Technique 6: Pseudo-element Decorations

Using ::before and ::after for decorative corner accents.

Corner Accents

Decorative L-shapes at corners

Tape Effect

Simulated masking tape

Interactive Border Picker

Click a style to apply it to the preview card.

Preview Card

Select a border style

Rough Buttons

Applying rough border techniques to interactive buttons.

Rough Inputs

Form inputs with sketchy border treatments.