Borders Guide
Borders define structure and shape language. Keep them consistent and subtle so your profile looks intentional instead of crowded.
Fast path: border style -> border size -> border color -> border radius -> align widgets/activity/buttons to the same shape family.
Border Fields (Current Stack)
- Profile Border Style:
None, Solid, Dashed, Dotted, Double, Groove, Ridge. - Profile Box Border Size:
None, 1px, 2px, 3px, 5px. - Profile Box Border Color: global border color.
- Profile Box Border Radius:
None, Small (4px), Medium (8px), Large (12px), Round (50%).
Borders controls from your settings screen.
Stack note: profile border selectors also include some navigation surfaces, so border changes can subtly affect nav framing in addition to core boxes.
Borders Workflow
- Set Border Style first (
Solidis safest for modern UI). - Set Border Size next (start at
1px). - Set Border Color to gentle contrast against your surfaces.
- Set Border Radius to define your shape language.
- Cross-check other sections (widgets, activity, buttons, nav) for shape consistency.
Starter Recipes
Modern Premium
- Style: Solid
- Size: 1px
- Radius: Medium (8px) or Large (12px)
- Color: subtle neutral contrast
Sharp Panel
- Style: Solid or Dashed
- Size: 1px or 2px
- Radius: None or Small (4px)
- Color: stronger but not harsh contrast
Soft UI
- Style: Solid
- Size: 1px
- Radius: Large (12px)
- Color: low-contrast and calm
Common Fixes
- Everything looks boxed/heavy: drop size to
1pxand soften border color. - UI feels messy: avoid mixing multiple border styles across sections.
- Profile looks inconsistent: match widget/activity/button radius to your global border radius family.
- Mobile feels crowded: keep borders thin and avoid high-contrast outlines.
- Navigation looks off after border edits: retune nav border controls after setting global border defaults.
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
