Border
We standardize the borders that can be used in buttons, cards, pop-ups and other components.
Border style
There are few border styles to choose.
| Name | Thickness | Demo |
| Solid | 1px | |
| Dashed | 2px | |
export function BorderBasic() { return ( <table className="demo-border"> <tbody> <tr> <td className="text">Name</td> <td className="text">Thickness</td> <td className="line">Demo</td> </tr> <tr> <td className="text">Solid</td> <td className="text">1px</td> <td className="line"> <div /> </td> </tr> <tr> <td className="text">Dashed</td> <td className="text">2px</td> <td className="line"> <div className="dashed" /> </td> </tr> </tbody> </table> );}
Radius
There are few radius styles to choose.
No Radius
border-radius: "0px"
Small Radius
border-radius: 2px
Large Radius
border-radius: 4px
Round Radius
border-radius: 20px
export function BorderRadius() { return ( <ElRow gutter={12} className="demo-radius"> {radiusGroup.map((radius) => ( <ElCol className={styles.col} span={6} xs={{ span: 12 }} key={radius.name}> <div className="title">{radius.name}</div> <div className="value"> <code>border-radius: {radius.value}</code> </div> <div className={ radius.type ? `radius radius--${radius.type}` : "radius" } /> </ElCol> ))} </ElRow> );}
Shadow
There are few shadow styles to choose.
Basic Shadow--el-box-shadow Light Shadow--el-box-shadow-light Lighter Shadow--el-box-shadow-lighter Dark Shadow--el-box-shadow-dark export function BorderShadow() { return ( <div className="demo-shadow"> {shadowGroup.map((shadow) => ( <div className="demo-shadow__item" key={shadow.name}> <div className={ shadow.type ? `demo-shadow__box demo-shadow__box--${shadow.type}` : "demo-shadow__box" } /> <span className="demo-shadow-text">{shadow.name}</span> <code className="demo-shadow__var"> {shadow.type ? `--el-box-shadow-${shadow.type}` : "--el-box-shadow"} </code> </div> ))} </div> );}
