用 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 里既难维护又易出错。
比如表单输入框经常要统一为 1px solid #ccc + 6px 圆角，但用户聚焦时又需高亮边框——这种状态变化无法用内联样式表达。
- 定义 class：
.input-field { border: 1px solid #ccc; border-radius: 6px; } .input-field:focus { border-color: #4a90e2; outline: none; } - 避免在
属性里重复写border和border-radius，否则响应式切换或主题切换时几乎无法管理 - 如需全局统一风格，建议在 CSS 变量中定义边框颜色和圆角尺寸，例如：
--border-color: #d0d0d0;，后续通过border: 1px solid var(--border-color);复用
容易被忽略的细节：边框盒模型与 box-sizing
默认情况下，border 会额外增加元素总宽高（即“内容盒模型”），这会导致布局偏移或响应式断点错乱——尤其在 flex 或 grid 容器中表现明显。
比如一个设了 width: 100% + border: 2px solid 的 div，实际占位是 100% + 4px，可能撑破父容器。
-
解决方法：统一加
box-sizing: border-box;，让width和height包含边框和内边距 - 推荐在根级或重置样式中全局设置：
* { box-sizing: border-box; } - 注意：IE8 及以下不支持
border-box在textarea和某些表单控件上，但现代项目基本无需考虑
圆角和实线边框本身很简单，真正容易翻车的是它们和其他属性（比如 overflow、transform、box-shadow）叠加时的渲染优先级和裁剪行为。调试时优先检查是否遗漏 border-radius 同步应用到父容器，以及 box-sizing 是否生效。
