Border Design Specifications
Naive UI standardizes borders used in buttons, cards, pop-ups, and other components for consistent visual design.
When to Use
- Understanding border style options
- Applying consistent radius styles
- Using shadow styles for depth
- Maintaining design consistency
- Creating themed components with proper borders
Border Radius
Naive UI provides standardized border radius values for consistent rounded corners.
| CSS Variable |
Value |
Usage |
--border-radius |
3px |
Base radius for components |
--border-radius-small |
2px |
Small radius for buttons, tags |
Usage Examples
<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>
<template>
<div :style="{ borderRadius: themeVars.borderRadius }">
Base radius element
</div>
<div :style="{ borderRadius: themeVars.borderRadiusSmall }">
Small radius element
</div>
</template>
In CSS with n-element
<template>
<n-el
tag="div"
style="
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
"
>
Rounded container
</n-el>
</template>
Border Colors
Naive UI uses semantic border colors that adapt to light and dark themes.
Light Theme
| CSS Variable |
Value |
Usage |
--border-color |
rgb(224, 224, 230) |
Default border color |
--divider-color |
rgb(239, 239, 245) |
Divider lines |
Dark Theme
| CSS Variable |
Value |
Usage |
--border-color |
rgba(255, 255, 255, 0.24) |
Default border color |
--divider-color |
rgba(255, 255, 255, 0.09) |
Divider lines |
Box Shadows
Naive UI provides three levels of shadow styles for depth and elevation.
| CSS Variable |
Usage |
--box-shadow-1 |
Light shadow for cards, dropdowns |
--box-shadow-2 |
Medium shadow for popovers, modals |
--box-shadow-3 |
Heavy shadow for dialogs, overlays |
Shadow Values
Light Theme
--box-shadow-1: 0 1px 2px -2px rgba(0, 0, 0, .08),
0 3px 6px 0 rgba(0, 0, 0, .06),
0 5px 12px 4px rgba(0, 0, 0, .04);
--box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .12),
0 6px 16px 0 rgba(0, 0, 0, .08),
0 9px 28px 8px rgba(0, 0, 0, .05);
--box-shadow-3: 0 6px 16px -9px rgba(0, 0, 0, .08),
0 9px 28px 0 rgba(0, 0, 0, .05),
0 12px 48px 16px rgba(0, 0, 0, .03);
Dark Theme
--box-shadow-1: 0 1px 2px -2px rgba(0, 0, 0, .24),
0 3px 6px 0 rgba(0, 0, 0, .18),
0 5px 12px 4px rgba(0, 0, 0, .12);
--box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .24),
0 6px 12px 0 rgba(0, 0, 0, .16),
0 9px 18px 8px rgba(0, 0, 0, .10);
--box-shadow-3: 0 6px 16px -9px rgba(0, 0, 0, .08),
0 9px 28px 0 rgba(0, 0, 0, .05),
0 12px 48px 16px rgba(0, 0, 0, .03);
Usage Examples
<script setup>
import { useThemeVars } from 'naive-ui'
const themeVars = useThemeVars()
</script>
<template>
<div :style="{ boxShadow: themeVars.boxShadow1 }">
Light elevation
</div>
<div :style="{ boxShadow: themeVars.boxShadow2 }">
Medium elevation
</div>
<div :style="{ boxShadow: themeVars.boxShadow3 }">
Heavy elevation
</div>
</template>
Scrollbar Styles
Naive UI provides customizable scrollbar styles.
| CSS Variable |
Value |
Usage |
--scrollbar-color |
Light: rgba(0, 0, 0, 0.25) |
Scrollbar thumb color |
--scrollbar-color-hover |
Light: rgba(0, 0, 0, 0.4) |
Scrollbar thumb hover |
--scrollbar-width |
5px |
Scrollbar width |
--scrollbar-height |
5px |
Scrollbar height |
--scrollbar-border-radius |
5px |
Scrollbar thumb radius |
CSS Variables Summary
:root {
--border-radius: 3px;
--border-radius-small: 2px;
--border-color: rgb(224, 224, 230);
--divider-color: rgb(239, 239, 245);
--box-shadow-1: 0 1px 2px -2px rgba(0, 0, 0, .08),
0 3px 6px 0 rgba(0, 0, 0, .06),
0 5px 12px 4px rgba(0, 0, 0, .04);
--box-shadow-2: 0 3px 6px -4px rgba(0, 0, 0, .12),
0 6px 16px 0 rgba(0, 0, 0, .08),
0 9px 28px 8px rgba(0, 0, 0, .05);
--box-shadow-3: 0 6px 16px -9px rgba(0, 0, 0, .08),
0 9px 28px 0 rgba(0, 0, 0, .05),
0 12px 48px 16px rgba(0, 0, 0, .03);
--scrollbar-width: 5px;
--scrollbar-height: 5px;
--scrollbar-border-radius: 5px;
}
Transition Timing
Naive UI uses standardized cubic-bezier timing functions for smooth transitions.
| CSS Variable |
Value |
Usage |
--cubic-bezier-ease-in-out |
cubic-bezier(.4, 0, .2, 1) |
General transitions |
--cubic-bezier-ease-out |
cubic-bezier(0, 0, .2, 1) |
Enter animations |
--cubic-bezier-ease-in |
cubic-bezier(.4, 0, 1, 1) |
Exit animations |
Usage Example
<template>
<n-el
tag="div"
style="
transition: all 0.3s var(--cubic-bezier-ease-in-out);
border-radius: var(--border-radius);
"
>
Smooth transition element
</n-el>
</template>
Best Practices
- Use CSS Variables: Always use predefined CSS variables for consistency
- Match Context: Choose appropriate shadow depth based on element importance
- Dark Mode: Border and shadow colors automatically adjust in dark mode
- Consistent Radius: Use
--border-radius for most components, --border-radius-small for compact elements
- Smooth Transitions: Use the provided cubic-bezier functions for consistent animation feel
- Accessibility: Ensure sufficient contrast for borders in both themes
Related Resources
jiaiyan