Loading…

How to use Border Radius Generator

Drag the per-corner sliders to round each corner separately, preview the shape live, and copy the resulting border-radius CSS including elliptical values.

Frequently asked questions

Can I round corners differently?

Yes — border-radius accepts up to four values (or eight with a slash) to control each corner's horizontal and vertical radius separately.

How do I make a perfect circle?

Set border-radius to 50% on a square element; equal width and height then render a full circle.

What creates a blob shape?

Uneven horizontal and vertical radii per corner, using the slash syntax, produce smooth asymmetric organic blob shapes.

More Developer Tools

Flexbox Generator
Visual flex layout + CSS code.
Grid Generator
Visual grid layout + CSS code.
Animation Generator
Generate keyframes with preview.
Meta Tags Advanced
SEO + OG + Twitter meta generator.
Slugify
Convert any text into a clean URL slug — strips accents, lowercases and joins words with a custom separator.
Case Converter (Dev)
Convert identifiers between camelCase, PascalCase, snake_case, kebab-case, CONSTANT_CASE, dot.case, Title and Sentence case.
Bytes Humanizer
Turn raw byte counts into human-readable sizes in KiB/MiB (binary) or KB/MB (decimal), and parse sizes back to bytes.
Number Formatter
Format numbers with locale-aware thousands separators and fixed decimals using the Intl API — US, EU, Indian and more.
Base64URL Encoder
Encode or decode UTF-8 text to URL-safe Base64 (base64url) with no padding — ideal for JWTs and query parameters.
JWT Generator (HS256)
Sign a JSON Web Token with HMAC-SHA256 from your header, payload and secret — output verifiable against jwt.io.
URL Encoder / Decoder
Percent-encode or decode text for URLs using encodeURIComponent or encodeURI, in both full-string and component modes.
JSON to Query String
Convert a JSON object into a URL query string with bracket notation for nested objects and arrays, fully percent-encoded.

← View all Developer ToolsBrowse all 1,100+ tools →