border-radius 是 CSS3 中用于设置元素边框圆角的属性。它可以让原本方正的元素（如按钮、卡片、图片容器）拥有圆润的边角，使界面看起来更加现代、友好。从 0（直角）到 50%（正圆），圆角大小可以灵活调整。
按钮样式：现代 UI 设计几乎离不开圆角按钮。小圆角（4-8px）适合标准按钮，大圆角（16-24px）适合强调按钮，50% 适合图标按钮。
卡片容器：内容卡片使用 8-16px 圆角，使信息区块更加柔和，减少视觉压迫感。
头像/图片：将图片容器设置为 border-radius: 50% 即可创建完美的圆形头像，这是社交网络和个人资料页的标准做法。
标签/徽章：使用单边圆角或胶囊形状（两端完全圆角）的标签设计，在导航栏和筛选器中非常流行。
border-radius 支持 1-4 个值：
border-radius: 10px; — 四个角统一为 10px
border-radius: 10px 20px; — 左上/右下 10px，右上/左下 20px
border-radius: 10px 20px 30px; — 左上 10px，右上/左下 20px，右下 30px
border-radius: 10px 20px 30px 40px; — 左上 10px，右上 20px，右下 30px，左下 40px
像素（px）是固定大小，不受元素尺寸影响。百分比（%）则相对于元素的宽/高计算，因此在响应式设计中更灵活。例如 50% 在正方形上形成正圆，在矩形上形成椭圆。
支持。border-radius 可以使用百分比值，表示圆角半径相对于元素对应边长的百分比。例如 50% 在正方形元素上会形成正圆，在矩形上会形成椭圆。本工具同时支持像素(px)和百分比(%)两种单位。
CSS border-radius 的完整写法顺序为：左上(top-left)、右上(top-right)、右下(bottom-right)、左下(bottom-left)。如果只写一个值，四个角使用相同的圆角；两个值分别对应左上/右下和右上/左下；三个值分别对应左上、右上/左下、右下。
将元素的宽度和高度设置为相同的值，并将 border-radius 设置为 50%。例如：width: 100px; height: 100px; border-radius: 50%。本工具提供圆形预设，一键生成完美圆形效果。
border-radius 在所有现代浏览器中均完全支持（Chrome、Firefox、Safari、Edge）。IE9+ 也支持。无需添加 -webkit- 或 -moz- 前缀。本工具生成的代码无需任何兼容性处理即可直接使用。
可以。CSS3 支持椭圆角，语法为 border-radius: 水平半径/垂直半径。例如 border-radius: 10px/5px 表示水平半径10px，垂直半径5px，形成椭圆角。本工具目前主要支持正圆角（等水平垂直半径），但百分比在矩形元素上自然会产生椭圆效果。
不会。border-radius 只影响视觉呈现，不影响元素的点击区域和布局尺寸。即使元素看起来是圆形，它的实际边界框仍然是矩形。如需实现真正的圆形点击区域，需要使用 clip-path 或 SVG。
可以。可以使用单独的属性如 border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 分别设置四个角。本工具自动生成简写语法，如需单独设置可通过分别调整四个角的滑块实现。
border-radius 会裁剪背景图片、背景色和边框，使它们遵循圆角轮廓。如果元素有 overflow: hidden 属性，子元素也会被圆角裁剪。这是创建圆角图片容器、头像等的常用技巧。