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: ;
• 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: px;
• Mixed corners: border-radius: px px
px px;
3. Compute the Tailwind class:
• All equal, value is 0: rounded-none
• All equal, value >= 9999: rounded-full
• All equal, other: rounded-[px]
• Mixed: rounded-[px_px_
px_px]
4. Output both CSS and Tailwind.
5. 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.