naive-ui-design-border

name	naive-ui-design-border
description	Border design specifications for Naive UI components. Invoke when user needs to understand border styles, radius options, or shadow styles used throughout Naive UI.
metadata	{"author":"jiaiyan","version":"1.0.0"}

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 - (, , , .), 
                    (, , , .), 
                    (, , , .);

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 - (, , , .), 
                    (, , , .), 
                    (, , , .);

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, , , .), 
                      (, , , .);
  :    - (, , , .), 
                      (, , , .), 
                      (, , , .);
  
  : ;
  : ;
  : ;
}

---

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

1. Use CSS Variables: Always use predefined CSS variables for consistency
2. Match Context: Choose appropriate shadow depth based on element importance
3. Dark Mode: Border and shadow colors automatically adjust in dark mode
4. Consistent Radius: Use --border-radius for most components, --border-radius-small for compact elements
5. Smooth Transitions: Use the provided cubic-bezier functions for consistent animation feel
6. Accessibility: Ensure sufficient contrast for borders in both themes

---

Related Resources

Resource	Description
useThemeVars	Access theme variables in JavaScript
n-element	Use CSS variables in templates
Color Design	Color specifications