Border Design Specifications
Element Plus 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
Border Styles
Element Plus provides several border style options:
Border Width
| Variable | Value | Usage |
|---|---|---|
--el-border-width | 1px | Standard border width |
--el-border-width-light | 1px | Light border |
--el-border-width-lighter | 1px | Lighter border |
--el-border-width-extra-light | 1px | Extra light border |
Border Style
| Variable | Value | Usage |
|---|---|---|
--el-border-style | solid | Default solid border |
--el-border-color | var(--el-border-color-base) | Default border color |
Border Colors
| Variable | Usage |
|---|---|
--el-border-color | Base border color |
--el-border-color-light | Light border color |
--el-border-color-lighter | Lighter border color |
--el-border-color-extra-light | Extra light border color |
--el-border-color-dark | Dark border color |
--el-border-color-darker | Darker border color |
Border Radius
Element Plus provides standardized border radius values:
| Variable | Value | Usage |
|---|---|---|
--el-border-radius-base | 4px | Base radius for components |
--el-border-radius-small | 2px | Small radius for buttons, tags |
--el-border-radius-round | 20px | Round radius for avatars, pills |
--el-border-radius-circle | 100% | Circle for avatars |
Usage Examples
/* Base radius */
.card {
border-radius: var(--el-border-radius-base);
}
/* Small radius */
.button {
border-radius: var(--el-border-radius-small);
}
/* Round elements */
.pill-button {
border-radius: var(--el-border-radius-round);
}
/* Circle elements */
.avatar {
border-radius: var(--el-border-radius-circle);
}
Shadow Styles
Element Plus provides shadow styles for depth and elevation:
| Variable | Usage |
|---|---|
--el-box-shadow | Base shadow for cards, dropdowns |
--el-box-shadow-light | Light shadow for subtle elevation |
--el-box-shadow-lighter | Lighter shadow for minimal elevation |
--el-box-shadow-dark | Dark shadow for modals, dialogs |
Shadow Values
:root {
--el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--el-box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
--el-box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
--el-box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
}
Usage Examples
/* Card shadow */
.card {
box-shadow: var(--el-box-shadow-light);
}
/* Dropdown shadow */
.dropdown {
box-shadow: var(--el-box-shadow);
}
/* Modal shadow */
.modal {
box-shadow: var(--el-box-shadow-dark);
}
CSS Variables Summary
:root {
/* Border */
--el-border-width: 1px;
--el-border-style: solid;
--el-border-color: var(--el-border-color-base);
/* Border Colors */
--el-border-color-base: #dcdfe6;
--el-border-color-light: #e4e7ed;
--el-border-color-lighter: #ebeef5;
--el-border-color-extra-light: #f2f6fc;
--el-border-color-dark: #d4d7de;
--el-border-color-darker: #cdd0d6;
/* Border Radius */
--el-border-radius-base: 4px;
--el-border-radius-small: 2px;
--el-border-radius-round: 20px;
--el-border-radius-circle: 100%;
/* Box Shadow */
--el-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--el-box-shadow-light: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
--el-box-shadow-lighter: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
--el-box-shadow-dark: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
}
Best Practices
- Use CSS Variables: Always use predefined CSS variables for consistency
- Match Context: Choose appropriate shadow depth based on element importance
- Responsive Radius: Consider smaller radius values for mobile interfaces
- Dark Mode: Border colors automatically adjust in dark mode