Borders & Shadows
Borders and shadows add definition, depth, and visual interest to your popup. Use them to create clear boundaries and elevate elements.
Border Settings
Border Properties
| Property | Description |
|---|---|
| Width | Border thickness |
| Color | Border color |
| Style | Line style |
| Radius | Corner roundness |
Border Width
Set thickness in pixels:
| Value | Effect |
|---|---|
| 0px | No border |
| 1px | Subtle |
| 2px | Normal |
| 3-4px | Bold |
| 5px+ | Heavy |
Border Color
Any valid color:
#e2e8f0 — Light gray (subtle)
#4F46E5 — Brand color (accent)
#ef4444 — Red (alert)
Border Style
| Style | Description |
|---|---|
| Solid | Continuous line |
| Dashed | Dashed line |
| Dotted | Dotted line |
| None | No border |
Individual Borders
Per-Side Borders
Set different borders for each side:
Top: 2px solid #4F46E5
Right: none
Bottom: 1px solid #e2e8f0
Left: none
Use Cases
- Top only — Header accents
- Bottom only — Separators
- Left only — Quote styling
- All sides — Container definition
Border Radius
Values
| Value | Result |
|---|---|
| 0px | Square corners |
| 4px | Slightly rounded |
| 8px | Rounded |
| 12px | More rounded |
| 16px | Very rounded |
| 24px+ | Highly rounded |
| 50% | Circle/ellipse |
| 9999px | Pill shape |
Per-Corner Radius
Set different radius per corner:
Top-Left: 16px
Top-Right: 16px
Bottom-Right: 0px
Bottom-Left: 0px
Common Patterns
Rounded Card:
Border Radius: 12px (all corners)
Bottom Sheet:
Top-Left: 16px
Top-Right: 16px
Bottom-Right: 0px
Bottom-Left: 0px
Pill Button:
Border Radius: 9999px
Box Shadow
Shadow Properties
| Property | Description |
|---|---|
| X Offset | Horizontal position |
| Y Offset | Vertical position |
| Blur | Shadow blur radius |
| Spread | Shadow spread |
| Color | Shadow color |
Creating Shadows
Light Shadow
X: 0px
Y: 2px
Blur: 4px
Spread: 0px
Color: rgba(0, 0, 0, 0.1)
Medium Shadow
X: 0px
Y: 4px
Blur: 8px
Spread: 0px
Color: rgba(0, 0, 0, 0.15)
Heavy Shadow
X: 0px
Y: 8px
Blur: 24px
Spread: 0px
Color: rgba(0, 0, 0, 0.2)
Shadow Presets
| Style | Values |
|---|---|
| Subtle | 0 1px 3px rgba(0,0,0,0.1) |
| Card | 0 4px 6px rgba(0,0,0,0.1) |
| Elevated | 0 10px 20px rgba(0,0,0,0.15) |
| Floating | 0 20px 40px rgba(0,0,0,0.2) |
| Inner | inset 0 2px 4px rgba(0,0,0,0.1) |
Multiple Shadows
Combine shadows for depth:
0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24)
Colored Shadows
Match shadow to element:
Shadow Color: rgba(79, 70, 229, 0.3) // Indigo glow
Inset Shadows
Creating Inset Effect
Add inset for inner shadows:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
Use Cases
- Pressed button states
- Input field depth
- Card inset areas
Styling Patterns
Card Style
Border: 1px solid #e2e8f0
Border Radius: 12px
Shadow: 0 4px 6px rgba(0,0,0,0.1)
Floating Style
Border: none
Border Radius: 16px
Shadow: 0 20px 40px rgba(0,0,0,0.2)
Outlined Style
Border: 2px solid #4F46E5
Border Radius: 8px
Shadow: none
Subtle Style
Border: 1px solid transparent
Border Radius: 8px
Shadow: 0 1px 3px rgba(0,0,0,0.1)
Element-Specific Borders
Buttons
Border: 2px solid #4F46E5
Border Radius: 8px
Hover:
Border: 2px solid #4338CA
Images
Border: 3px solid #ffffff
Border Radius: 8px (or 50% for circular)
Shadow: 0 4px 8px rgba(0,0,0,0.1)
Input Fields
Border: 1px solid #e2e8f0
Border Radius: 6px
Focus:
Border: 2px solid #4F46E5
Dividers
Border-Top: 1px solid #e2e8f0
Border Radius: 0px
Responsive Considerations
Mobile Adjustments
- Reduce shadow blur on mobile
- Consider removing heavy shadows
- Simpler border radius
Performance
Heavy shadows can affect performance:
- Use simpler shadows on mobile
- Avoid multiple layered shadows
- Test on lower-end devices
Best Practices
- Consistency — Use same border radius throughout
- Subtlety — Shadows should enhance, not dominate
- Purpose — Every border/shadow should serve a function
- Hierarchy — Use shadows to show elevation
- Performance — Test on all devices
Common Mistakes
❌ Too many different border radii ❌ Overly harsh shadows ❌ Inconsistent border colors ❌ Heavy shadows on mobile ❌ Borders competing with shadows
Design Tokens
Create consistent values:
// Border Radius
--radius-sm: 4px
--radius-md: 8px
--radius-lg: 16px
--radius-full: 9999px
// Shadows
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05)
--shadow-md: 0 4px 6px rgba(0,0,0,0.1)
--shadow-lg: 0 10px 20px rgba(0,0,0,0.15)
Troubleshooting
Border not showing:
- Check border width > 0
- Verify border color set
- Ensure border style is not "none"
Shadow not visible:
- Check color opacity
- Verify offset/blur values
- Look for overflow:hidden on parent
Radius not working:
- Check value format (px, %)
- Verify on correct element
- Look for overflow:hidden issues