Borders Guide: Radius, thickness, and the “designed” look
Borders are quiet structure. When they’re consistent, your profile feels clean and intentional.
When they’re chaotic, everything looks boxed, glued, or coupon-adjacent.
📸 What you’ll see in Borders
This matches the Borders section on the Settings screen.
✅ What Borders is doing
Borders is your global default for edge styling:
color, thickness, style, and overall corner roundness.
Other sections (Widgets, Activity, Buttons, Navigation) can override it in their own areas.
Big goal:
Pick one “shape family” (sharp, modern, or soft) and keep it consistent across Widgets + Activity + Buttons.
Pick one “shape family” (sharp, modern, or soft) and keep it consistent across Widgets + Activity + Buttons.
🎛 Borders settings (based on your screen)
- Profile Box Border Color — default border line color.
- Profile Border Style — border style (Solid is the modern safe pick).
- Profile Box Border Size — border thickness (1px is the modern sweet spot).
- Profile Box Border Radius — global corner roundness (your “shape language”).
Most profiles look best with:
Solid + 1px + a radius in the 8–12px range (unless you’re intentionally going sharp/retro).
Solid + 1px + a radius in the 8–12px range (unless you’re intentionally going sharp/retro).
🧠 The border mental model (3 parts)
- Color — gentle separation, not a thick outline.
- Size + Style — how “present” the frame is.
- Radius — the personality (sharp vs premium vs bubbly).
📐 Radius vibe guide
- 0px → sharp / terminal / retro panel UI
- 4px → subtle modern (safe)
- 8–12px → modern premium “app UI”
- 16px+ → soft, playful
Consistency check:
If your Borders radius is “Large (12px),” try keeping Widgets and Activity in the same family (8–12px).
That’s how profiles look designed instead of assembled.
If your Borders radius is “Large (12px),” try keeping Widgets and Activity in the same family (8–12px).
That’s how profiles look designed instead of assembled.
🎨 3 border “design languages” (pick one)
✅ Modern Premium (most themes)
- Style: Solid
- Size: 1px
- Radius: 8–12px
- Color: subtle neutral (gentle contrast)
🧱 Sharp Panel UI (retro/terminal)
- Style: Solid (or dotted if intentionally retro)
- Size: 1–2px
- Radius: 0–4px
- Color: slightly higher contrast (still not harsh)
🍬 Soft Friendly UI (playful)
- Style: Solid
- Size: 1px
- Radius: 16px+
- Color: gentle, low contrast
What not to do:
Thick borders + heavy shadows + neon everywhere = “sci-fi shipping container.”
Keep borders thin and let color/spacing do the work.
Thick borders + heavy shadows + neon everywhere = “sci-fi shipping container.”
Keep borders thin and let color/spacing do the work.
🛠 Troubleshooting (fast fixes)
- Everything looks boxed and busy: reduce border size to 1px, switch to Solid, soften border color.
- Everything blends together: add a subtle 1px border and slightly increase contrast.
- Profile feels inconsistent: align radius family across Borders + Widgets + Activity + Buttons.
- Borders feel heavy on mobile: keep 1px and avoid high-contrast borders.
Safe default setup:
Solid · 1px · 10–12px radius · subtle neutral border color.
Solid · 1px · 10–12px radius · subtle neutral border color.
