Tiny Online Tools logoTiny Online Toolssearch搜索工具…grid_view全部工具
首页chevron_right设计工具chevron_rightBorder Radius 生成器Border Radius 生成器

Border Radius 生成器

可视化控制圆角效果并复制CSS代码。

预设
单位px%
链接所有角
生成的CSS
border-radius: 12px;

相似工具

CSS Clip-Path 生成器

CSS Clip-Path 生成器

生成带实时预览的CSS clip-path形状。

Box Shadow 生成器

Box Shadow 生成器

可视化创建CSS阴影效果,支持实时预览。

CSS Grid 生成器

CSS Grid 生成器

通过实时预览构建响应式 CSS Grid 布局,并复制现成代码。

Flexbox 生成器

Flexbox 生成器

通过实时预览创建灵活的 CSS Flex 布局,并复制现成代码。

音频裁剪

音频裁剪

将音频文件裁剪到指定的开始和结束时间,可预览所选片段并下载为 WAV。

字体预览工具

字体预览工具

使用自定义文本和样式预览 Google Fonts。

PDF 大纲编辑器

PDF 大纲编辑器

添加或替换 PDF 的书签/大纲。粘贴带缩进的列表即可生成嵌套导航树。

apps

更多工具

浏览我们完整的免费在线工具集合。

不用猜数值,也能直观调整圆角

border-radius 看起来简单,但一旦你需要的不只是普通圆角矩形,手动试值就会很费时间。这个生成器可以让你直接调节每个角并实时查看结果,更适合微调按钮、卡片、输入框和其他界面元素。

你可以控制哪些内容

工具覆盖了最常见的 border-radius 调整方式:

  • 所有角共用一个值
  • 每个角单独设置
  • 使用像素或百分比单位
  • 通过预设快速切换常见形状

哪些场景特别适合使用

圆角生成器通常适合这些情况:

  • 更贴近现有设计系统的风格
  • 测试胶囊、圆形或更自然的角形
  • 为按钮和卡片生成可复用 CSS
  • 减少在开发者工具里反复试错

单位选择会影响最终观感

像素值会带来固定圆角,而百分比更依赖元素本身的尺寸。如果某个形状在一个组件上很好看、换到另一个组件却不协调,记得试试更换单位。