ClawHub

Border Radius

v1.0.0

Generate CSS border-radius code. Use when the user asks to generate rounded corners, create a border radius, make a blob shape, or produce border-radius CSS.

⭐ 0· 128·1 current·1 all-time
byOmar Hernandez@ohernandez-dev-blossom

Install

OpenClaw Prompt Flow

Install with OpenClaw

Best for remote or guided setup. Copy the exact prompt, then paste it into OpenClaw for ohernandez-dev-blossom/border-radius.

Previewing Install & Setup.
Prompt PreviewInstall & Setup
Install the skill "Border Radius" (ohernandez-dev-blossom/border-radius) from ClawHub.
Skill page: https://clawhub.ai/ohernandez-dev-blossom/border-radius
Keep the work scoped to this skill only.
After install, inspect the skill metadata and help me finish setup.
Use only the metadata you can verify from ClawHub; do not invent missing requirements.
Ask before making any broader environment changes.

Command Line

CLI Commands

Use the direct CLI path if you want to install manually and keep every step visible.

OpenClaw CLI

Bare skill slug

openclaw skills install border-radius

ClawHub CLI

Package manager switcher

npx clawhub@latest install border-radius
Security Scan
VirusTotalVirusTotal
Benign
View report →
OpenClawOpenClaw
Benign
high confidence
✓
Purpose & Capability
Name, description, and runtime instructions all focus on generating border-radius CSS and Tailwind classes. There are no extra environment variables, binaries, or unrelated requirements.
✓
Instruction Scope
SKILL.md only describes parsing user input and producing CSS/Tailwind outputs, preset mappings, and simple validation. It does not instruct reading files, contacting external endpoints, or accessing unrelated system state.
✓
Install Mechanism
No install spec and no code files — instruction-only. Nothing will be written to disk or downloaded during install.
✓
Credentials
No environment variables, credentials, or config paths are requested; the declared inputs (corner values, linked flag) match the skill's purpose.
✓
Persistence & Privilege
The skill is not forced-always and does not request elevated or persistent privileges. It allows normal autonomous invocation (the platform default), which is appropriate for this kind of utility.
Assessment
This skill appears safe and does only local text generation for CSS and Tailwind classes. Before using in production: review outputs when users specify units other than px (the skill omits Tailwind arbitrary classes for non-px units), and validate any generated CSS in your app context. No network access or secrets are requested.

Like a lobster shell, security has layers — review code before you run it.

latestvk9767t9scafae6npc49apps6dx83cy7t
128downloads
0stars
1versions
Updated 1mo ago
v1.0.0
MIT-0
Omar Hernandez@ohernandez-dev-blossom
latest
Download

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:

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.

Comments

Loading comments...