Rough Borders & Textures
Exploring non-standard border treatments for wireframe, grungy, and sketchy themes using SVG filters, border-image, and CSS techniques.
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.