css边框属性border与border-radius区别
border定义边框的有无、样式和颜色，如border: 2px solid #000；border-radius控制边角形状，使直角变圆角，如border-radius: 10px；两者配合使用可实现带圆角的边框效果，缺一不可。
border 和 border-radius 是 CSS 中用于控制元素边框样式的两个不同属性，它们功能不同，但常一起使用来美化元素外观。
border：设置边框的基本样式
border 用来定义元素边框的宽度、样式和颜色。它可以统一设置四条边，也可以分别控制每一边。
常见用法
包括：
- border-width：设置边框粗细，如 1px、2em
- border-style：设置边框类型，如 solid（实线）、dashed（虚线）、none（无边框）等
- border-color：设置边框颜色
也可以简写为：
border: 2px solid #000; —— 表示 2 像素宽的黑色实线边框
border-radius：设置边框圆角
border-radius 用于将元素的直角边框变成圆角，让视觉更柔和。它不改变边框是否存在，只影响边角形状。
常用方式：- 直接设置一个值，如 border-radius: 10px;，四个角都变成 10px 的圆角
- 设置多个值可分别控制不同角，如 border-radius: 5px 10px 15px 20px;
- 也支持椭圆圆角，如 border-radius: 20px / 10px;
两者关系与配合使用
border 决定“有没有边框、什么样”，而 border-radius 决定“边角是方是圆”。即使设置了圆角，若没有 border，依然看不到边框线。
例如：- 只有 border-radius 没有 border：背景或背景色会变成圆角，但无边框线条
- 只有 border 没有 border-radius：有边框但四角为直角
- 两者都有：既有边框又有圆角，视觉更丰富
基本上就这些，理解清楚各自职责，就能灵活控制元素外形。
