用 border 设置实线边框最直接，需同时指定宽度、样式（solid）和颜色；搭配 border-radius 实现圆角，且须配合 box-sizing: border-box 避免布局错乱。
用 border 设置实线边框是最直接的方式
HTML5 本身不提供边框设置能力，所有样式必须靠 CSS 控制。border 是最基础、兼容性最好、语义最明确的实线边框写法。
常见错误是只写 border: 1px solid; 却漏掉颜色——浏览器会按当前文字颜色渲染，导致在深色背景或继承颜色下不可见。
-
border: 2px solid #333;：宽度、样式、颜色三者缺一不可（solid表示实线） - 若只要某一边有边框，用
border-top/border-right等更精准控制 - 避免用
border: 1px;这种简写——省略solid后边框根本不会显示
圆角加实线边框必须配 border-radius
圆角和边框是两个独立属性，但必须同时存在才能达到“圆角+实线”的视觉效果。单独设 border-radius 不会生成边框，单独设 border 也不会自动圆角。
注意：当 border-radius 值大于等于元素宽高一半时，会变成圆形/椭圆；过大的值会被浏览器自动裁剪，无需担心溢出。
立即学习“前端免费学习笔记（深入）”；
-
border: 1px solid #e0e0e0;+border-radius: 4px;是最常用组合 - 四角不同半径可写成
border-radius: 4px 8px 4px 0;（顺时针：左上、右上、右下、左下） - 如果用了
overflow: hidden的容器，且子元素有阴影或绝对定位，圆角可能被裁切——这时要确保父容器也设了border-radius
高频场景下推荐用 class 封装，别 inline 写
实际项目中，“圆角+实线”常复用于按钮、卡片、输入框等组件，硬编码在 HTML 里既难维护又易出错。
