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

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

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

Technique 4: CSS Gradient Borders

Using repeating gradients for dashed and dotted border patterns.

Gradient Dashes

Repeating linear gradient

Dot Border

Radial gradient dots

Technique 5: Box Shadow Effects

Using layered box-shadows for sketchy and offset effects.

Sketch Shadow

Layered offset shadows

Hard Offset

Brutalist solid shadow

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.