Border Radius Generator
Visually craft CSS border-radius values — including the 8-value slash syntax for organic blob shapes
Corner settings
Live preview
CSS
.element {
border-radius: 16px;
}Examples
Pill button
border-radius: 9999px;Setting an extremely large radius on all corners produces a fully rounded pill shape that adapts to any element size.
Organic blob
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;The slash syntax lets each corner have a different horizontal and vertical radius, creating the fluid, amoeba-like shapes popular in modern UI design.
Details
The CSS border-radius property accepts up to eight values using the slash syntax (a b c d / e f g h) that controls horizontal and vertical radii independently for each corner — unlocking organic blob shapes and asymmetric curves. This generator lets you dial in all four corners with sliders in px or %, toggle advanced mode for separate horizontal/vertical radii, see the shape update in real time, and copy the finished CSS rule. Everything runs locally in your browser.
Examples
Rounded card preset
Top-left 12px · Top-right 12px · Bottom-right 12px · Bottom-left 12px · unit: px · Advanced: offborder-radius: 12px;When all four corners are equal and Advanced is off, buildCss collapses to the single-value shorthand.
Pill from a very large radius
All four corners 9999px · unit: px · Advanced: offborder-radius: 9999px;Any radius larger than the half-measure of the element behaves as a half-circle, producing a pill shape regardless of the element's width.
Blob shape with the slash syntax
Top-left 60% · Top-right 40% · Bottom-right 30% · Bottom-left 70% · unit: % · Advanced: on · vertical: 60% 30% 70% 40%border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;Advanced mode emits the eight-value slash syntax, where the four values after the slash set the vertical radii independently from the horizontal ones.
About this tool
The Border Radius Generator lets you visually design CSS border-radius values for any element — from simple rounded corners to complex organic blob shapes — without memorising syntax. Four corner sliders control the radius in px or %, and a live preview box updates instantly as you drag.
Enable Advanced mode to unlock the eight-value slash syntax (border-radius: a b c d / e f g h), which sets independent horizontal and vertical radii for every corner. This is the technique behind the fluid, amoeba-like shapes widely used in modern UI design.
Everything runs locally in your browser. No shape data is sent to a server — just dial in your values, watch the preview, and copy the finished CSS rule.
How to use
Choose a preset or unit
Pick a preset chip (Rounded card, Pill, Circle, Blob) for an instant starting point, or toggle between px and % units to match your design system.
Adjust corner sliders
Drag the four corner sliders to set the radius. Enable Advanced mode to reveal separate horizontal and vertical sliders per corner, producing the slash syntax for blob shapes.
Copy the CSS
Click Copy CSS to copy the generated border-radius rule and paste it directly into your stylesheet.
Use cases
Designing organic hero sections
Use the slash-syntax Blob preset as a starting point for marketing sections, podcast artwork, or any container where a flatly rounded rectangle feels too rigid.
Building a design-system scale
Export rounded-card, pill, and circle presets as documented tokens (sm, md, lg, pill) so every component on the site reuses the same radii values.
Quickly trying an asymmetric radiu
Drag only one or two corners to leave a tab, speech-bubble, or receipt edge — the 4-value syntax top-left top-right bottom-right bottom-left is read left-to-right from the top.
Pixel-perfect avatars
Set all four corners to 50% on a square preview to verify a circle, then test the same shape on rectangular thumbnails to confirm the ellipse is what you want.
border-radius syntax forms
| Syntax | When to use it |
|---|---|
| border-radius: 8px | Single value — same radius on all four corners |
| border-radius: 8px 16px 8px 16px | Four values — top-left, top-right, bottom-right, bottom-left |
| border-radius: 50% | Percentage — 50% on all corners produces a perfect ellipse |
| border-radius: a b c d / e f g h | Slash syntax — independent horizontal/vertical radii per corner for blob shapes |
Common mistakes
Mistake:Forgetting the slash syntax and trying to set independent horizontal/vertical radii with the four-value form.
Fix:Toggle Advanced (slash syntax) on. The four values after the slash control the vertical radii for each corner, which is how the Blob preset produces an organic shape.
Mistake:Reading the four-value shorthand clockwise.
Fix:The CSS order is top-left, top-right, bottom-right, bottom-left — reading clockwise from the top-left. The bottom-left value is the last in the list, not the first.
Mistake:Using an extremely large px value (e.g. 9999) instead of a percentage to make a circle.
Fix:border-radius: 50% produces a perfect circle on a square and an ellipse on a rectangle without depending on the element's measured size. Use % for responsive containers.
Mistake:Animating border-radius with the four-value shorthand (e.g. 8px 16px 8px 16px).
Fix:Browsers must interpolate each value individually across the same corner. Match the value count on both ends of the transition to avoid jumps and 'jagged' tweens.
Frequently asked questions
References & standards
Related tools
Aspect Ratio Calculator
Calculate dimensions and ratios for images and videos.
Barcode Generator
Generate barcodes in 8 formats (CODE128, EAN13, UPC, and more) — configure line width, height, and text display, then download as SVG or PNG.
Base64 Image Encoder
Open the Image workspace in Base64 Toolbox to resize and convert images to Base64 data URIs, then copy HTML, CSS, Markdown or JavaScript snippets.
CSS Grid Generator
Visually build CSS Grid layouts — set columns, rows and gaps, see a live preview, and copy production-ready grid-template CSS.
Cubic Bezier / Easing Generator
Build a CSS cubic-bezier() timing function visually — drag control points, preview common presets, see the easing curve live, and copy the transition-timing-function CSS.
EXIF Viewer & Cleaner
View and remove EXIF metadata from images. See camera info, GPS location, and dates — then download a clean copy.