CSS Border Radius Generator
Paste a border-radius value, tweak corners visually, and copy CSS or Tailwind. Elliptical slash syntax is available. Generated in your browser — never sent.
Developer notes
• Output follows CSS shorthand collapse: 1–4 tokens per side, slash syntax only when any corner's horizontal radius differs from its vertical radius. • Tailwind export maps a uniform px radius to the default v4 scale (2–32px, plus none/full) within ±1px; otherwise it emits rounded-[…] with underscores for spaces. • Pill presets use 9999px (rounded-full), not 50%. 50% is a circle only on a square preview. • Preview width/height are UI state encoded in the shareable URL; they are not exposed options and do not change the exported radius string when the unit is px.
Options
- Link corners — When on, editing one corner updates all four — the usual card/button workflow. Turn off for independent top-left, top-right, bottom-right, and bottom-left radii.
- Unit — Suffix applied to every corner and to the exported string: px (absolute) or % (relative to the element's dimensions). Circle presets use %; card and pill presets use px.
- Elliptical — Off: one radius per corner (up to 4 values). On: horizontal plus vertical radius per corner, emitting 8-value slash syntax when any pair differs.
- Export format — Clipboard payload: a CSS border-radius declaration, a --radius custom property, the nearest Tailwind rounded-* class (with rounded-[…] fallback), or a Bootstrap 5 rounded-* utility (with inline style fallback).
Related CSS tools
Hub: Color & CSS Tools. Convert colors with Color Converter, build tint/shade scales with Color Shades & Tints Generator, or shrink and format stylesheets with Minify CSS and Beautify CSS.
CSS Border Radius Generator FAQ
Paste-local rounded-corner editor
Can I paste an existing border-radius from DevTools?
Yes. Paste 1–4 lengths, optional 8-value slash syntax, or a full border-radius: …; declaration. Invalid input shows an error and keeps the last valid preview.
What does elliptical mode do?
It unlocks a horizontal and vertical radius per corner. When any pair differs, the CSS output uses slash syntax (a b c d / e f g h).
How does Tailwind export choose a class?
A uniform pixel radius within ±1px of the default Tailwind v4 scale becomes rounded-none, rounded-xs … rounded-4xl, or rounded-full. Anything else, including %, slash syntax, and mixed corners, becomes rounded-[…].
Is my CSS uploaded anywhere?
No. Parsing and assembly run entirely in your browser. FastMinify never sends the pasted value to a server.
Color & CSS Tools
Paste-local WCAG contrast checking with modern CSS color syntax — pair and matrix views, never uploaded.
Explore other tool categories
Minify
Shrink code and assets for production — minify JavaScript, CSS, HTML, JSON and XML before gzip or CDN deploy.
Unminify
Expand minified or compressed code — unminify JavaScript, CSS, TypeScript, SCSS, LESS, SQL, YAML and other formats when debugging or reviewing.
Conversion
Transform data between JSON, YAML, XML and CSV locally — no server uploads.
Encoding
Encode or decode Base64, URL components and HTML entities — client-side only.
Serialization
Serialize and deserialize PHP data structures beside JSON workflows.
JSON Tools
Validate, format, diff and explore JSON payloads — complementary to minifiers and converters.
SVG Tools
Preview, optimize with SVGO, export Data URI, resize, beautify, convert to JSX and validate SVG — all in your browser.
Beautify
Make code readable with consistent indentation — beautify JavaScript, CSS, TypeScript, SCSS, LESS, Markdown, GraphQL, SQL, YAML and more in your browser.
CSS preprocessors
Compile SCSS or LESS to standard CSS in the browser — pair with beautify or minify for a full stylesheet workflow.
DevOps & Infra
Terraform HCL format/validate/minify, Dockerfile format & lint, Docker Compose and .env validation.
CI/CD
GitHub Actions and GitLab CI — format YAML and check workflow/job structure in your browser.
Logs & observability
Line-oriented JSON/NDJSON and Nginx/Apache access logs — format, filter, validate, and CSV/TSV.
Kubernetes
Multi-doc manifests, structural validate, Ingress/Deployment starters, and Helm values formatting.
Networking / IP
CIDR, subnets, and IPv4/IPv6 helpers — in your browser.
Security & tokens
JWKS, X.509 certificates, and secrets scan — browser-local.
API & schemas
OpenAPI tools to format, validate, and lint your specs.
HTTP Tools
Paste-local cURL, HTTP messages, URLs, HAR files, and Cookie / Set-Cookie headers — format and inspect in your browser, never sent.
SEO / Web Tools
Generate meta tags, Open Graph, and Twitter Card output locally — previews simulated from your inputs, never fetched from your live site.
Developer utilities
Timestamps, UUID, ULID, Nanoid, cron, passwords, regex, slugify, number bases, case, text diff, and chmod — all client-side.
Text & Markdown
Count words, build Markdown TOCs, and clean line lists — all in your browser.
AI & LLM
Token counting, pricing estimates, and context-window fit — 100% browser-local.
Test Data
Synthetic field values for fixtures and DB seed — reserved-range phone numbers first.
Barcode labels
Draw Code 128, EAN-13, and UPC-A label images in the browser — PNG and SVG download, not a GS1 lookup.