技能檔案

Border Craft

Name: Border Craft
Author: Dragoon0x

Border design patterns, dividers, separators, and using borders as primary design elements.

Dragoon0x0 星標2026年4月11日

職業: 平面設計師
分類: 架構模式

技能內容

Border Craft

Borders as Information

Borders separate, group, contain, and emphasize. They carry meaning:

Thin (1px): Subtle separation, table cells, list dividers
Medium (2px): Emphasis, active states, selected items
Thick (3-4px): Strong emphasis, section dividers, brand accent

Border Styles

Style	Use	Avoid
Solid	Default for everything	N/A
Dashed	Drag targets, placeholder areas	Decoration
Dotted	Input suggestions, optional boundaries	Heavy use
Double	Editorial emphasis, retro/classic feel	UI components

Alternatives to Borders

相關技能

Border Craft | Skills Pool

--radius-none: 0px;      /* Sharp, editorial, industrial */
--radius-sm: 4px;        /* Subtle softening */
--radius-md: 8px;        /* Standard UI */
--radius-lg: 12px;       /* Cards, containers */
--radius-xl: 16px;       /* Large components */
--radius-full: 9999px;   /* Pills, avatars */

Border Craft

Border Craft

Borders as Information

Border Styles

Alternatives to Borders

Border Craft

Border Craft

Borders as Information

Border Styles

Alternatives to Borders

Border Radius Scale

Sessions

Docker Patterns

Autonomous Loops

Kotlin Patterns

Eval Harness

Golang Patterns