WebToolsPlanet
css Tools

Border Radius Generator

Create complex CSS border-radius shapes with independent corner controls — from rounded buttons to organic blobs.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Border Radius Generator?

CSS border-radius is the property that rounds the corners of an element's border box. At its simplest, border-radius: 8px rounds all four corners identically. But the full syntax is far more powerful: each corner can be set independently using border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius. Furthermore, each corner can receive two values (horizontal radius / vertical radius using the shorthand border-radius syntax with a slash), creating elliptical corners that unlock organic, blob-like shapes.

The shorthand notation border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% defines horizontal radii for all four corners before the slash, and vertical radii after — enabling the irregular, asymmetric shapes common in modern "squircle" and organic blob UI trends. This generator provides a visual editor where you drag sliders for each corner value and see the shape update in real time, then copies the exact CSS needed for your project.

How to Use Border Radius Generator

1

Use "Uniform" mode to set all corners to the same radius, or switch to "Independent" mode to control each corner separately

2

For each corner, adjust the horizontal radius slider (0–50%) and optionally the vertical radius for elliptical corners

3

Select the element type preview: Button, Card, Avatar, or Custom to see your shape in context

4

Toggle percentage vs pixel units — percentages are relative to the element size and stay proportional at any dimension

5

Click "Copy CSS" to get the complete border-radius shorthand ready to paste into your stylesheet

Common Use Cases

  • Creating pill-shaped buttons (border-radius: 9999px) that visually adapt to any button width
  • Generating organic blob shapes for hero section decorative backgrounds
  • Creating a squircle avatar shape (popular in iOS since iOS 7 for app icons)
  • Designing a card component with only top corners rounded and square bottom corners
  • Building tabs with rounded top corners but flat bottom edges
  • Creating asymmetric rounded chat bubbles with one flat corner pointing towards the sender
  • Designing callout boxes with a pointed corner indicating what they annotate
  • Generating the diagonal-cut corner shapes used in cyberpunk/techy UI design

Example Input and Output

Common border-radius patterns and their CSS values:

Shape name
Circle from a square element
Pill shape (width-independent)
Rounded card (8px all corners)
Top-rounded only
Organic blob shape
CSS border-radius value
.circle  { border-radius: 50%; }
.pill    { border-radius: 9999px; }
.card    { border-radius: 8px; }
.tab     { border-radius: 8px 8px 0 0; }
.blob    { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }

Client-Side Processing

All shape computation and preview rendering happen in your browser. No data is sent to our servers.

CSS Custom Properties

Store your border-radius values as CSS custom properties for easy theming: :root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 9999px; }. This makes it trivial to change your design system's corner style globally. Design systems like shadcn/ui expose a single --radius variable that all components scale from.

Overflow and Border Radius

Add overflow: hidden to a parent with border-radius to ensure child elements are also clipped to the rounded shape — useful for image cards (where the image should respect the card's rounded corners) and for clipping absolutely-positioned children that extend beyond the corners.

Frequently Asked Questions

What does the "/" (slash) in border-radius mean?
The slash separates horizontal radii from vertical radii for each corner. border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% means: the top-left corner has a 30% horizontal radius and 30% vertical — making it a circular arc. The top-right has 70% horizontal but 30% vertical — making it an elliptical arc stretched wider than tall. This is how organic blob shapes are created.
When should I use pixels vs percentages?
Use pixels (border-radius: 8px) when you want a consistent visual corner size that doesn't change with element dimensions — ideal for buttons, cards, and inputs where the corner should look the same at any size. Use percentages (border-radius: 50%) when you want the corner to scale proportionally with the element — essential for circles, pills, and organic blobs that must work at any size.
How do I make a perfect circle?
Apply border-radius: 50% to a square element (equal width and height). The 50% radius on all corners creates a semicircle arc on each side, which together form a perfect circle. For non-square elements, 50% creates an ellipse instead of a circle — to force a circle on any element, set an explicit equal width and height along with border-radius: 50%.
What is a "squircle" and how is it different from a circle?
A squircle is a super-ellipse shape between a square and a circle — it has smoother corner curves that merge more naturally into the straight sides. iOS uses squircles for app icons. CSS cannot perfectly replicate a squircle with border-radius (which creates circular arcs), but border-radius: 30% on all corners approximates it well. The CSS clip-path: path() property with a super-ellipse SVG path is the more accurate approach.
Can different corners have different radii?
Yes. The full shorthand is border-radius: top-left top-right bottom-right bottom-left. So border-radius: 16px 0 0 16px rounds only the left side — useful for button groups where the first button has rounded left corners and the last button has rounded right corners. You can also use individual longhand properties: border-top-left-radius: 16px 24px creates an elliptical top-left corner.
Why does border-radius clip my box-shadow?
border-radius clips the element's paint area, not the box-shadow. Box-shadows are drawn outside the element and are not clipped by border-radius. However, if you are using an inset box-shadow (inside the element), it IS clipped and will follow the rounded shape correctly. If you notice shadow clipping in complex nested elements, it is more likely an overflow: hidden on a parent clipping the shadow.

How This Tool Works

The generator maintains state for 8 radius values (horizontal and vertical radius for each of the 4 corners). An SVG or Canvas preview renders a rectangle with the current border-radius values applied. The CSS output assembles the optimal shorthand: if all 8 values are equal, the shorthand is a single value; if the 4 horizontal values are equal and 4 vertical are equal, it uses the slash notation; otherwise the full 8-value notation is generated.

Technical Stack

Browser-native JavaScriptSVG/Canvas live previewCSS shorthand assemblerClient-side only

Related Tools

CSS Unit Converter
Convert between PX, REM, EM, VW, VH, and % CSS units — with configurable base font size and live conversion.
Box Shadow Generator
Create CSS box shadows with a visual editor.
CSS Gradient Generator
Create beautiful CSS gradients with a visual editor.
Flexbox Generator
Build CSS Flexbox layouts visually — configure every container and item property and get ready-to-use CSS.
CSS Grid Generator
Build CSS Grid layouts visually — configure columns, rows, gaps, and named areas and copy production-ready CSS.
CSS Minifier
Compress and minify CSS code to reduce file size and speed up page loads.