border-radius（边界半径）

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 per-corner
• 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: border-radius: <value>;
• Tailwind CSS class equivalent

Instructions

1. Parse the user's request. Determine if all corners are the same or each is specified separately.
2. Compute the CSS value:

- All corners equal: border-radius: <value>px; - Mixed corners: border-radius: <tl>px <tr>px <br>px <bl>px;

1. 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]

1. Output both CSS and Tailwind.
2. 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 → 0px 50px 0px 50px

Options

• topLeft: 0–9999 — default 16
• topRight: 0–9999 — default 16
• bottomRight: 0–9999 — default 16
• bottomLeft: 0–9999 — default 16
• linked: if true, all corners use the same value

Examples

Input: "Rounded corners, 12px all sides" Output:

border-radius: 12px;

Tailwind: rounded-[12px]

Input: "Blob shape border radius" Output:

border-radius: 30px 70px 70px 30px;

Tailwind: rounded-[30px_70px_70px_30px]

Input: "Full pill / circle border radius" Output:

border-radius: 9999px;

Tailwind: rounded-full

Input: "Top corners 24px, bottom corners 0" Output:

border-radius: 24px 24px 0px 0px;

Tailwind: rounded-[24px_24px_0px_0px]

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.