卡片边框：推荐浅灰1px
新手做卡片，最稳的 borders推荐是 1px solid #E5E7EB，背景用白色，页面底色用 #F8FAFC 或 #F9FAFB。这个组合容错率高，不会太重，也不会完全看不出层次。
不推荐一开始就用彩色边框。彩色边框适合状态提示，比如选中、警告、成功，不适合普通信息卡片。满屏蓝边或绿边，视觉噪音会很大。
borders推荐：新手这样选
borders推荐给新手，我不会让你背一堆属性，而是按使用场景选方案。卡片、按钮、输入框、表格、分隔线各有合适的边框写法。你照着对比用，先能做出不难看的页面，再慢慢调出自己的风格。
按钮边框：推荐分主次
主按钮推荐不用边框，直接实心背景；次按钮推荐 1px 品牌色边框加白底；弱按钮可以无边框，只用文字。这样用户自然知道哪个操作最重要。
如果所有按钮都用同样的 borders，页面会失去优先级。新手最容易犯的错，就是把“统一”理解成“全都一样”。真正的统一，是规则一致，不是样子完全相同。
输入框边框：推荐三态写法
输入框推荐默认、聚焦、错误三套边框。默认 #D1D5DB，聚焦品牌色，错误红色并配提示文案。别只做默认态，用户点击后没有反馈，会觉得页面迟钝。
高度也要配合边框。桌面端输入框 36px 到 40px 常见，移动端 44px 起步更舒服。边框只是边界，点击面积才决定好不好用。
表格边框：推荐少竖线
普通数据表推荐只用横向 borders。表头底边稍深，数据行底边稍浅，鼠标悬停时给行背景色。这样比全边框更清楚，也更现代。
只有在打印、财务、库存、排班这类需要逐格核对的场景，才推荐完整网格线。否则竖线越多，读数越慢。
分隔线：推荐用单边框替代hr
内容区分隔可以用 border-top 或 border-bottom，不一定非要插 hr。比如列表项用 border-bottom，模块标题下用 border-bottom，代码更好维护，间距也更容易统一。
颜色推荐比文字浅很多。正文如果是 #111827，分隔线用 #E5E7EB 就够。分隔线的任务是让人感到分组，而不是让人盯着线看。
常见问题
新手最推荐的borders颜色是什么？
浅色页面先用 #E5E7EB 做普通分隔，#D1D5DB 做输入框默认边框。状态边框再用品牌色、红色、绿色等语义色。
borders推荐写成公共样式吗？
推荐。至少把 border color、radius、focus border 做成变量或公共类。项目一大，统一修改会轻松很多。
圆角和边框怎么搭配？
普通卡片 8px 圆角配 1px 浅边框很稳；按钮可用 6px 到 8px；输入框别太圆，否则在严肃后台里会显得不够利落。