CSS Border Radius Generator
Generate border-radius CSS for uniform rounding or per-corner customization, including special shapes like blobs and leaves.
Input
- - Mode:
uniform (all corners equal) or INLINECODE2 - Uniform value: integer 0–9999 px (default
16) - Per-corner values: top-left, top-right, bottom-right, bottom-left in px (defaults
16 16 16 16)
Output
- - CSS property: INLINECODE5
- Tailwind CSS class equivalent
Instructions
- 1. Parse the user's request. Determine if all corners are the same or each is specified separately.
- Compute the CSS value:
- All corners equal:
border-radius: <value>px;
- Mixed corners:
border-radius: <tl>px <tr>px <br>px <bl>px;
- 3. Compute the Tailwind class:
- All equal, value is 0:
rounded-none
- All equal, value >= 9999:
rounded-full
- All equal, other:
rounded-[<value>px]
- Mixed:
rounded-[<tl>px_<tr>px_<br>px_<bl>px]
- 4. Output both CSS and Tailwind.
- If the user mentions a shape preset, map it:
- None →
0 0 0 0
- Small →
4 4 4 4
- Medium →
8 8 8 8
- Large →
16 16 16 16
- XL →
24 24 24 24
- Full / pill / circle →
9999 9999 9999 9999
- Blob →
30px 70px 70px 30px
- Leaf → INLINECODE19
Options
- -
topLeft: 0–9999 — default INLINECODE21 - INLINECODE22 : 0–9999 — default INLINECODE23
- INLINECODE24 : 0–9999 — default INLINECODE25
- INLINECODE26 : 0–9999 — default INLINECODE27
- INLINECODE28 : if true, all corners use the same value
Examples
Input: "Rounded corners, 12px all sides"
Output:
border-radius: 12px;
Tailwind: INLINECODE29
Input: "Blob shape border radius"
Output:
border-radius: 30px 70px 70px 30px;
Tailwind: INLINECODE30
Input: "Full pill / circle border radius"
Output:
border-radius: 9999px;
Tailwind: INLINECODE31
Input: "Top corners 24px, bottom corners 0"
Output:
border-radius: 24px 24px 0px 0px;
Tailwind: INLINECODE32
Error Handling
- - If a value is negative, set it to 0 and inform the user that border-radius cannot be negative.
- If a value exceeds 9999, cap at 9999 (used to represent fully rounded /
rounded-full). - If the user provides a unit other than px (e.g., rem, %), note the unit in the output and omit the Tailwind arbitrary value if not px.
CSS 边框圆角生成器
生成用于统一圆角或每个角自定义圆角的 border-radius CSS，包括特殊形状（如 blob 和 leaf）。
输入
- - 模式：uniform（所有角相等）或 per-corner
- 统一值：整数 0–9999 px（默认 16）
- 每个角的值：左上、右上、右下、左下，单位为 px（默认 16 16 16 16）
输出
- - CSS 属性：border-radius: <值>;
- Tailwind CSS 类等效项
说明
- 1. 解析用户的请求。确定所有角是否相同，或者每个角是否单独指定。
- 计算 CSS 值：
- 所有角相等：border-radius: <值>px;
- 混合角：border-radius: <左上>px <右上>px <右下>px <左下>px;
- 3. 计算 Tailwind 类：
- 全部相等，值为 0：rounded-none
- 全部相等，值 >= 9999：rounded-full
- 全部相等，其他：rounded-[<值>px]
- 混合：rounded-[<左上>px
<右上>px<右下>px_<左下>px]
- 4. 输出 CSS 和 Tailwind。
- 如果用户提到形状预设，则进行映射：
- 无 → 0 0 0 0
- 小 → 4 4 4 4
- 中 → 8 8 8 8
- 大 → 16 16 16 16
- 特大 → 24 24 24 24
- 全圆/药丸/圆形 → 9999 9999 9999 9999
- 水滴 → 30px 70px 70px 30px
- 叶子 → 0px 50px 0px 50px
选项
- - topLeft：0–9999 — 默认 16
- topRight：0–9999 — 默认 16
- bottomRight：0–9999 — 默认 16
- bottomLeft：0–9999 — 默认 16
- linked：如果为 true，所有角使用相同的值
示例
输入：圆角，所有边 12px
输出：
css
border-radius: 12px;
Tailwind：rounded-[12px]
输入：水滴形状边框圆角
输出：
css
border-radius: 30px 70px 70px 30px;
Tailwind：rounded-[30px70px70px_30px]
输入：全药丸/圆形边框圆角
输出：
css
border-radius: 9999px;
Tailwind：rounded-full
输入：上角 24px，下角 0
输出：
css
border-radius: 24px 24px 0px 0px;
Tailwind：rounded-[24px24px0px_0px]
错误处理
- - 如果值为负数，将其设置为 0 并告知用户边框圆角不能为负数。
- 如果值超过 9999，上限为 9999（用于表示完全圆角/rounded-full）。
- 如果用户提供的单位不是 px（例如 rem、%），在输出中注明单位，如果不是 px 则省略 Tailwind 任意值。
