圆角生成器 - 在线圆角生成器

圆角生成器常见问题

border-radius支持哪些单位？

支持px（像素）和%（百分比）。使用百分比时，圆角相对于元素宽度/高度自适应，常用于圆形和胶囊形按钮（50%）。

如何创建圆形？

正方形元素加上border-radius: 50%即可创建正圆。胶囊形可以使用border-radius: 999px（或10000px）来创建一个两端半圆的形状。

8个值怎么写？

完整写法支持8个值（斜杠前后各4个）：border-radius: 左上右上右下左下 / 左上右上右下左下。斜杠前是水平半径，斜杠后是垂直半径。日常用4个值就够了。

4个值的顺序是什么？

按顺时针：左上(top-left) → 右上(top-right) → 右下(bottom-right) → 左下(bottom-left)。如果4个值相同也可以只写1个值。

百分比圆角的参照是什么？

百分比是相对元素自身宽高的。水平半径相对宽度，垂直半径相对高度。所以同一个50%，在正方形上是圆形，在长方形上会是椭圆。

圆角能只倒一个角吗？

可以。单独写一个角即可，比如 border-radius: 20px 0 0 0 只圆左上角。本工具关闭"统一"后即可分别控制四个角。

圆角和边框、背景怎么配合？

border-radius会同时裁剪边框、背景、内边距所在区域，但不会裁剪内容本身。图片若想跟着圆角走，需要给图片容器设置 overflow:hidden。

有哪些常见的圆角风格？

有：完全直角(0)、小圆角(4-8px，商务简洁)、中圆角(10-16px，现代卡片)、胶囊形(999px，两端半圆)、圆形(50%)。不同风格传递不同气质。

圆角生成器 - 示例演示

示例一：圆形头像

输入：元素200×200px，border-radius:50%

结果：border-radius: 50%;

正方形元素设50%即成正圆，是最常用的头像样式。

示例二：胶囊按钮

输入：按钮，height 40px，border-radius:999px

结果：border-radius: 999px;

两端半圆形成胶囊形，是当前最流行的按钮风格，比小圆角更有亲和力。

示例三：自定义四角差异

输入：左上20px、右上50%、右下8px、左下0

结果：border-radius: 20px 50% 8px 0;

四个角各不相同可以做出更有设计感的"异形"卡片，适合标题标签、价格牌等装饰元素。

圆角生成器深度解读

border-radius 的两种简化写法

border-radius 支持 1~4 个值和 8 个值（斜杠划分水平/垂直）两种写法。1~4个值时，水平和垂直半径相同；写斜杠时，斜杠前控制水平、斜杠后控制垂直。

border-radius 各写法对照
写法	含义
border-radius: 10px	四个角都是10px
border-radius: 10px 20px	左上右下10px，右上左下20px
border-radius: 10px 20px 30px	左上10，右上左下20，右下30
border-radius: 10px 20px 30px 40px	从左上顺时针依次10/20/30/40
border-radius: 50% / 25%	水平半径50%、垂直半径25%，形成椭圆

想做出椭圆形的按钮或卡片，就用斜杠写法给水平、垂直半径设不同的值。

px 与 % 到底怎么选

需要精确、固定尺寸的圆角用 px，比如4px小圆角按钮。
需要随元素尺寸自适应、始终保持比例的用 %，比如圆形头像用50%。
胶囊形按钮用超大px值(999px)最稳妥，因为任何尺寸的元素都会被压成两端半圆。

px 与 % 圆角对比
单位	计算基准	典型用途	注意
px	固定像素值	小圆角按钮、标签	不随元素大小变化
%	相对元素边框盒	圆形头像、椭圆	长方形上会变椭圆
999px	超大固定值	胶囊按钮	任意尺寸都压成半圆

一句话总结：%跟随元素大小，px固定不变。多端适配时%更省心，但要留意长方形上%会变成椭圆。

圆角的裁剪与内容溢出

border-radius 只作用于背景和边框，不会裁剪子元素内容。如果卡片里放了图片、字符串超出圆角边缘，需要在外层容器加 overflow:hidden 才能把内容也"藏进"圆角里。

图片卡片：外容器带圆角 + overflow:hidden，图片就不会凸出圆角。
圆角+阴影：阴影默认跟随元素，若同时用 overflow:hidden 会裁掉阴影，注意取舍。
圆角按钮文字：加 padding 保证文字不贴边才好看。

overflow 与圆角配合
场景	是否裁剪	推荐做法
卡片图片	需要裁剪	容器加 overflow:hidden
圆角+阴影	会裁掉阴影	避免同时用，或用内阴影替代
按钮文字	不会被裁剪	靠 padding 保证不贴边

圆角风格与品牌气质

圆角大小不只是技术参数，也会影响产品气质。

圆角风格参考
风格	圆角大小	适用场景
极简商务	0-4px	银行、政务、企业官网
现代卡片	8-16px	电商、SaaS、工具站
柔和亲和	16-24px	儿童、教育、生活类App
胶囊/圆形	999px/50%	按钮、头像、标签、图标

圆角生成器参考数据

四角圆角常见的组合写法

效果	CSS
四角全圆	border-radius: 12px;
只圆左上	border-radius: 12px 0 0 0;
只圆右上	border-radius: 0 12px 0 0;
只圆上两角	border-radius: 12px 12px 0 0;
对称圆角	border-radius: 12px 12px 4px 4px;
椭圆	border-radius: 50% / 25%;

不同元素圆角建议值

元素	建议圆角
输入框	4-8px
按钮	4px 或 999px
卡片	8-16px
弹窗	12-16px
头像	50%
标签/徽章	999px

使用说明

使用方法

1. 调整滑块设置四个角的圆角值。

2. 勾选"统一"用同一值控制所有角。

3. 选择px或%单位。

4. 查看实时预览效果。

5. 复制生成的CSS代码。