圆角生成器

它可以将正方形元素变为完美圆形。要实现真正的圆形，元素必须具有相等的宽高——例如 `width: 100px; height: 100px; border-radius: 50%`。50% 的半径从四个方向均分，形成完美曲线。对于非正方形元素，50% 则会产生椭圆——根据元素尺寸，可能是横椭圆或竖椭圆。这是CSS中制作圆形头像图片、圆形按钮和图标容器最常用的方式。

对非正方形元素（如按钮或标签）使用 `border-radius: 9999px`（或任意较大值如100px）。浏览器会自动将半径限制为元素较短边的一半，使短边变为完美半圆，长边保持笔直，从而形成几乎所有现代设计体系中都能看到的经典胶囊形CTA按钮。无论元素尺寸如何，`9999px` 技巧都能奏效，无需手动计算高度的一半。本生成器的「胶囊」预设可即时应用此效果。

像素值是绝对值——`12px` 的圆角无论元素大小如何始终保持12像素。元素缩放时，圆角尺寸不变。百分比值是相对值——`50%` 始终弯曲到每条边的精确中点，产生随元素缩放的比例形状。圆形、胶囊等应随元素缩放的形状使用百分比（`50%`）。卡片、按钮、输入框等UI组件希望圆角大小固定（作为设计系统令牌）时，则使用像素值。

标准 `border-radius` 只能产生向外弯曲（凸出）的圆角。要实现向内弯曲的内凹圆角——票根、标签和气泡形状上常见的向内「缺口」或「切入」曲线——单靠 `border-radius` 是无法实现的。常用技术是径向渐变遮罩：`mask: radial-gradient(circle 20px at top left, transparent 98%, black) top left / 51% 51% no-repeat ...`，对每个需要向内切入的角重复此操作。另一种方法是使用绝对定位的伪元素（`::before`），填充页面背景色并赋予向外的 `border-radius`，叠加在角落上，使其视觉上呈现内凹效果。对于票据式的锯齿边缘，可沿一侧使用重复径向渐变遮罩产生扇贝形穿孔效果。因此，「内凹圆角」本质上是一种遮罩技巧，而非 border-radius 的值——在搜索内凹圆角生成器时了解这一点很有帮助。

使用各角单独属性：`border-top-left-radius`、`border-top-right-radius`、`border-bottom-right-radius` 或 `border-bottom-left-radius`。例如，`border-bottom-right-radius: 24px` 仅将右下角圆化，其余三角保持直角。可自由组合：`border-top-left-radius: 16px; border-bottom-right-radius: 16px` 可创建对角圆化的形状。在简写中，两个值分别设置对角线上的角对：`border-radius: 16px 0` 将左上和右下角圆化，右上和左下保持直角。

从左上角顺时针：左上 → 右上 → 右下 → 左下。因此 `border-radius: 16px 8px 0 8px` 表示左上16px、右上8px、右下0、左下8px。这与 `margin`、`padding` 和 `border-width` 所采用的CSS标准简写方向一致。两个值时，第一个应用于左上和右下，第二个应用于右上和左下。三个值时，第二个同时应用于右上和左下。一个值时均匀应用于全部四个角。

可以——直接在 `<img>` 元素上应用 `border-radius`：`img { border-radius: 50%; width: 100px; height: 100px; }` 即可获得圆形头像。也可将图片包裹在带有 `overflow: hidden` 的 `<div>` 中，并对包裹容器应用圆角，这样布局控制更灵活。使用本工具的图片上传功能，可在复制CSS之前预览圆角在实际照片上的效果。这对于头像裁切、媒体卡片缩略图和图库布局尤为实用——这些场景中精确的裁切形状会直接影响设计效果。

将三个角设为较大值，一个角设为零：`border-radius: 50% 50% 50% 0`。结合 `transform: rotate(-45deg)` 即可创建经典地图定位标记的水滴形状。调整哪个角为零可改变水滴方向：`0 50% 50% 50%` 指向左侧，`50% 0 50% 50%` 指向右侧。为零的角形成尖端，三个大半径角构成圆润主体。适用于位置标记、指向箭头以及插画风格UI中的装饰性点缀。

斜杠用于分隔每个角的水平和垂直半径。语法为：`border-radius: [水平半径] / [垂直半径]`。例如，`border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%` 可创建类似蛋形的形状，每个角具有非对称的椭圆曲线。本工具中的随机 Blob 生成器就是使用此语法产生有机非对称形状的——这种形状在首图背景、装饰性blob和插画风格设计元素中非常流行。每个角可以有不同的水平与垂直半径比例。

cssmatic.com 的圆角工具虽然可用，但已多年未更新——缺乏图片上传、blob生成和预设库。css-tricks.com almanac 是优秀的文档参考，但并非交互式生成器。bennettfeely.com 的 clip-path 工具在使用场景上有所重叠，但面向 clip-path 而非 border-radius，需要SVG风格的坐标输入。UtiloKit 的生成器提供：支持图片上传的实时预览（完全本地处理）、形状预设（圆形、胶囊、卡片、蛋形、blob）、使用8值斜杠语法的随机blob生成、px/% 单位切换，以及三种复制格式。无广告、无水印、无需注册，任何内容均不发送至服务器。

不会——图片仅通过浏览器的 File API 加载，永远不会离开你的设备。预览元素通过 `createObjectURL()` 调用在本地渲染图片，完全保留在浏览器内存中。无上传、无服务器处理、无云端存储。同样的客户端架构适用于所有其他功能：滑块输入、CSS生成、blob随机化和剪贴板复制均在JavaScript中运行，页面初次加载后不产生任何网络请求。你的图片和设计内容完全私密。

`border-radius` 完全支持CSS过渡和关键帧动画。使用 `transition: border-radius 0.3s ease` 可在悬停时平滑插值。使用 `@keyframes` 可实现形状的连续变形——从 `0` 动画到 `50%` 可让正方形脉动变为圆形。在两个blob形状（不同的8值斜杠值）之间变形可创建流动的有机动画，在首图背景中很受欢迎。注意，对 border-radius 进行动画会在每帧触发重绘，因此对频繁动画的元素建议使用 `will-change: border-radius`。

`border-radius` 纯粹是视觉效果——它裁切元素的外观，但不改变其布局盒模型、外边距区域或指针事件命中区域。不可见的直角区域仍然可以点击，仍然占据布局空间。这对触控界面很重要：圆形按钮的角落仍然存在方形可点击区域。如需命中区域精确跟随圆角形状，请使用 `clip-path: circle()`，它同样会裁切指针事件。`box-shadow` 会正确跟随 `border-radius`；`outline` 在大多数浏览器中则不会——可使用 `box-shadow: 0 0 0 3px color` 作为圆角焦点环的替代方案。

可以——本工具完全响应式，适用于所有现代移动浏览器。在iPhone上，可在Safari或Chrome中直接使用，无需安装任何应用。在Android上，Chrome、Firefox和Edge均可正常运行。滑块针对触控进行了优化，拖动手柄尺寸合理。图片上传使用移动端原生文件选择器，可从相册或文件应用中选取。复制CSS使用所有现代移动浏览器均支持的标准Web剪贴板API。整个工具在客户端运行，无需下载应用、无需注册账号、数据不发送至任何地方。