CSS Border Radius Generator

What does the CSS Border Radius Generator do?

The CSS Border Radius Generator creates 4-corner rounded edges and 8-value organic blob silhouettes with live visual preview. It supports independent corner adjustments (Top-Left, Top-Right, Bottom-Right, Bottom-Left), linked corner lock sliders, fancy slash-syntax horizontal/vertical elliptical radii (border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;), popular design presets (Card 16px, Pill Capsule, Organic Blob, Teardrop, Egg Oval, and Leaf), and zero-click auto-conversion to standard CSS and Tailwind utility classes.

Core Concepts

Understanding CSS border-radius mechanics:

• 4-Corner Shorthand: Specifying 1 to 4 values sets the uniform circular curve of each corner (tl, tr, br, bl).
• 8-Value Elliptical Geometry (Slash Syntax): The syntax border-radius: H1 H2 H3 H4 / V1 V2 V3 V4; defines non-circular elliptical radii where the values before the slash dictate horizontal radii and values after determine vertical radii.
• Tailwind Utility Mapping: Maps standard pixel values to atomic Tailwind tokens (rounded-md, rounded-xl, rounded-2xl, rounded-full) and asymmetrical configurations to arbitrary utility classes (rounded-[...]).

How to use the tool?

1. Select Mode: Choose 4 Corners for symmetrical boxes or 8-Value Blob for fluid organic shapes.
2. Adjust Radius: Drag individual corner sliders or enable Link All Corners to scale all radii synchronously.
3. Copy Code: Grab the generated CSS declaration or Tailwind class with a single click.

Related Developer Utilities

If you work with CSS design tokens, web styling, and UI components, explore these complementary tools:

• CSS Box Shadow Generator: Generate smooth multi-layer drop shadows and elevation depth.
• CSS Gradient Generator: Generate multi-stop linear and radial CSS gradients and SVG tags.
• HEX to RGB & HSL Converter: Convert hex codes into CSS rgb(), hsl(), and CMYK formats.
• CSS Unit Converter: Convert pixels, rem, em, vw, and vh units seamlessly.

REST API Integration

Blueutils provides a free REST API endpoint (POST https://blueutils.com/api/css/border-radius-generator) to programmatically calculate normalized border-radius rules and Tailwind tokens.

API Request Parameters

API Request Payload Examples

cURL

curl -X POST https://blueutils.com/api/css/border-radius-generator \
  -H "Content-Type: application/json" \
  -d '{
    "mode": "standard",
    "tl": 16,
    "tr": 16,
    "br": 16,
    "bl": 16,
    "unit": "px"
  }'

Python

import requests

url = "https://blueutils.com/api/css/border-radius-generator"
payload = {
    "mode": "standard",
    "tl": 16,
    "tr": 16,
    "br": 16,
    "bl": 16,
    "unit": "px"
}
headers = {"Content-Type": "application/json"}
response = requests.post(url, json=payload, headers=headers)
print(response.json())

Java

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

public class Main {
    public static void main(String[] args) throws Exception {
        String jsonPayload = """
            {
                "mode": "standard",
                "tl": 16,
                "tr": 16,
                "br": 16,
                "bl": 16,
                "unit": "px"
            }
            """;

        HttpClient client = HttpClient.newHttpClient();
        HttpRequest request = HttpRequest.newBuilder()
            .uri(URI.create("https://blueutils.com/api/css/border-radius-generator"))
            .header("Content-Type", "application/json")
            .POST(HttpRequest.BodyPublishers.ofString(jsonPayload))
            .build();

        HttpResponse<String> response = client.send(request, HttpResponse.BodyHandlers.ofString());
        System.out.println(response.body());
    }
}

API Response Parameters

API Response Payload Examples

Success Response (HTTP 200 OK)

{
  "isValid": true,
  "mode": "standard",
  "unit": "px",
  "cssValue": "16px",
  "cssDeclaration": "border-radius: 16px;",
  "fullRule": "-webkit-border-radius: 16px;\nborder-radius: 16px;",
  "tailwind": "rounded-2xl"
}

Validation Failure Response (HTTP 400 Bad Request)

{
  "isValid": false,
  "error": "Invalid border radius configuration: must provide preset key or corner values."
}

Rate Limit Exceeded Response (HTTP 429 Too Many Requests)

{
  "error": "API rate limit exceeded. Please wait or contact support@blueutils.com."
}

Why use an API to generate Border Radii?

Integrating the Border Radius API into dynamic avatar services, design token pipelines, or AI agents provides key benefits:

• Dynamic Avatar & Thumbnail Masking: Generates deterministic organic blob masks and circular pill clips for dynamic OpenGraph images and profile pictures.
• Design Token Automation: Compiles corner radius tokens (sm, md, lg, full) into normalized CSS variables and Tailwind theme configurations during CI/CD.
• AI Agent Styling & UI Generation: Enables AI frontend agents to calculate mathematically valid asymmetrical 4-corner and 8-value blob geometries without manual syntax errors.

Native Usage

How to format border-radius values programmatically across programming environments:

Node.js (JavaScript)

// Calculate 4-corner or 8-value border-radius in Node.js
function createBorderRadius(config) {
  if (config.mode === 'fancy') {
    const h = `${config.tlh}% ${config.trh}% ${config.brh}% ${config.blh}%`;
    const v = `${config.tlv}% ${config.trv}% ${config.brv}% ${config.blv}%`;
    return `border-radius: ${h} / ${v};`;
  }
  const u = config.unit || 'px';
  return `border-radius: ${config.tl}${u} ${config.tr}${u} ${config.br}${u} ${config.bl}${u};`;
}

const blobConfig = {
  mode: 'fancy',
  tlh: 30, trh: 70, brh: 70, blh: 30,
  tlv: 30, trv: 30, brv: 70, blv: 70
};

console.log(createBorderRadius(blobConfig));

Windows (PowerShell Script)

# Programmatically format border-radius string in PowerShell
$tl = 16; $tr = 16; $br = 16; $bl = 16; $unit = "px"
$radiusCss = "border-radius: ${tl}${unit} ${tr}${unit} ${br}${unit} ${bl}${unit};"
Write-Host $radiusCss

Python

def create_border_radius(tl, tr, br, bl, unit="px"):
    if tl == tr == br == bl:
        return f"border-radius: {tl}{unit};"
    return f"border-radius: {tl}{unit} {tr}{unit} {br}{unit} {bl}{unit};"

print(create_border_radius(16, 16, 16, 16))

Java

public class BorderRadiusGenerator {
    public static String createBorderRadius(int tl, int tr, int br, int bl, String unit) {
        if (tl == tr && tr == br && br == bl) {
            return "border-radius: " + tl + unit + ";";
        }
        return "border-radius: " + tl + unit + " " + tr + unit + " " + br + unit + " " + bl + unit + ";";
    }

    public static void main(String[] args) {
        System.out.println(createBorderRadius(16, 16, 16, 16, "px"));
    }
}