A precise utility for generating CSS and Tailwind CSS border-radius code for uniform, per-corner, or complex geometric shapes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install border-radius
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install border-radius using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Border Radius Generator?
The Border Radius Generator is an essential addition to your collection of Openclaw Skills, designed to eliminate the manual math involved in complex CSS rounding. It allows developers to quickly generate syntactically correct code for everything from simple rounded corners to organic blob and leaf shapes.
By supporting both standard CSS property values and Tailwind CSS utility classes, this skill bridges the gap between traditional styling and modern utility-first frameworks. It handles per-corner customization with ease, ensuring that your UI components maintain pixel-perfect consistency across your entire project.
Border Radius Generator Use Cases
- Creating organic, non-symmetrical shapes like blobs or leaves for modern UI backgrounds.
- Generating pill-shaped buttons or circular avatars using the full-radius preset.
- Quickly calculating Tailwind CSS arbitrary value classes for specific per-corner rounding requirements.
- Converting high-level design descriptions like XL or Small into specific pixel-based CSS values.
How Border Radius Generator Works
- The skill parses the user's natural language input to identify the desired rounding mode, either uniform or per-corner.
- It maps shape keywords such as blob, leaf, or pill to their respective pixel-value arrays.
- The logic calculates the appropriate CSS syntax for the border-radius property based on the individual corner inputs.
- It generates a matching Tailwind CSS utility class, utilizing either standard rounded-X classes or arbitrary value syntax for mixed corners.
- The skill applies error handling to cap values at 9999px or normalize negative inputs to zero before outputting the final code blocks.
Border Radius Generator Setup
To integrate this utility into your environment, ensure you have the Openclaw Skills framework installed and add the border-radius skill to your agent configuration:
# Example command to register the skill in your local workspace
openclaw install skill-border-radius
Border Radius Generator Data Schema & Taxonomy
The skill processes inputs through a structured set of options and outputs standardized styling formats as shown below:
| Input Parameter | Type | Range / Default | Description |
|---|---|---|---|
topLeft |
Integer | 0-9999 (Default: 16) | Radius for top-left corner in px. |
topRight |
Integer | 0-9999 (Default: 16) | Radius for top-right corner in px. |
bottomRight |
Integer | 0-9999 (Default: 16) | Radius for bottom-right corner in px. |
bottomLeft |
Integer | 0-9999 (Default: 16) | Radius for bottom-left corner in px. |
linked |
Boolean | True/False | If true, all corners sync to the same value. |
Output Formats:
- CSS: Returns
border-radius: <values>;strings. - Tailwind: Returns specific classes like
rounded-fullor arbitrary blocks likerounded-[10px_20px_10px_20px].
Border Radius Generator Advanced Features
- Intelligent shape mapping for presets including Blob, Leaf, and various size increments (Small to XL).
- Automatic Tailwind optimization that switches to standard utility classes for edge cases like
rounded-noneorrounded-full. - Robust error handling that sanitizes negative values and handles unit conversion warnings for non-pixel inputs.
- Support for mixed-unit detection to ensure compatibility with design systems using rem or percentages.
SKILL.md
Loading
Related Openclaw Skills
JSON Formatter
A high-performance utility for prettifying, compressing, and validating JSON data structures with configurable indentation.
Marketing Designer
A senior-level creative strategist skill that bridges the gap between emotional human truths and data-driven marketing precision.
EngageBay
A powerful CRM and marketing automation skill that enables AI agents to manage contacts, deals, tasks, and workflows via the EngageBay platform.
Academic Deep Research
A rigorous, multi-cycle research agent that delivers APA-compliant narrative reports through transparent methodology and user checkpoints.
Summarize
A high-speed CLI tool designed to extract and summarize content from URLs, YouTube transcripts, and local documents using various LLM providers.
Escalation Skill
A specialized protocol for AI agents to escalate complex blockers to a supervisor agent or human via webhook gateways.
Featured*
