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;
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.
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:

css

border-radius: 12px;

Tailwind: rounded-[12px]

Input: "Blob shape border radius" Output:

css

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

Tailwind: rounded-[30px_70px_70px_30px]

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

css

border-radius: 9999px;

Tailwind: rounded-full

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

css

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.