Design CSS border-radius values visually with live preview. Supports simple, advanced (individual corners), and blob mode for organic shapes. Includes 8 blob presets and randomize. Free online border radius tool.
Border Radius Generator is a free online tool that lets you visually design CSS border-radius values with live preview. It supports three modes: Simple mode for uniform corner rounding, Advanced mode for individual corner control (top-left, top-right, bottom-right, bottom-left), and Blob mode for creating organic, asymmetric shapes using the 8-value border-radius shorthand. The tool outputs clean, copy-ready CSS with support for px, %, em, and rem units.
Use the Border Radius Generator when you need precise corner rounding for cards, buttons, modals, images, or any UI element. The Advanced mode is ideal when a design calls for asymmetric corners — like a chat bubble or a tag shape. The Blob mode is especially useful for creating organic, fluid shapes popular in modern design trends — decorative background elements, profile picture frames, and abstract hero section shapes that would be difficult to code by hand.
Developers use Border Radius Generator to create rounded card components and buttons with consistent corner values, design chat bubble shapes with asymmetric corners, build organic blob shapes for decorative backgrounds and hero sections, prototype Material Design and iOS-style rounded rectangles with specific radius values, and generate CSS for profile picture frames and badge shapes. The Blob mode with randomize feature is popular for generating unique organic shapes that would take significant trial and error to create manually.
Essential terms and definitions related to Border Radius Generator.
A CSS property that rounds the corners of an element's border box. The shorthand border-radius: TL TR BR BL sets all four corners. Each corner can have a circular radius (single value) or an elliptical radius (horizontal/vertical pair separated by /). Maximum rounding (50%) on a square creates a circle; on a rectangle, it creates an ellipse.
A border-radius corner with different horizontal and vertical radii, creating an oval-shaped curve rather than a circular arc. Specified using the / syntax: border-radius: 20px / 40px creates corners that are 20px wide and 40px tall. The 8-value shorthand (4 values / 4 values) allows each corner to have a unique elliptical radius — this is the basis for blob shapes.
An organic, fluid-looking CSS shape created using asymmetric border-radius values. The 8-value shorthand border-radius: a b c d / e f g h produces shapes that resemble natural forms like drops, eggs, or amoebas. These shapes are popular in modern web design for decorative elements. Unlike geometric shapes, blobs have no sharp angles and produce a soft, organic feel.
The CSS overflow: hidden property clips any content that extends beyond the element's padding box. When used with border-radius, it ensures that child elements (especially images) respect the rounded corners and do not overflow the visible rounded area. Without overflow: hidden, only the element's own border and background are rounded — child content remains rectangular.
The full border-radius shorthand supports 8 values separated by a slash: border-radius: TL-H TR-H BR-H BL-H / TL-V TR-V BR-V BL-V. The values before the slash control horizontal radii, and the values after control vertical radii. This creates elliptical corners rather than circular ones. For example, border-radius: 50% 30% 70% 40% / 60% 50% 40% 70% creates an organic blob shape. This is what the Blob mode in this tool uses.
px values create fixed-size rounded corners regardless of the element size — border-radius: 20px always produces 20px corners. % values are relative to the element's dimensions — border-radius: 50% on a square creates a perfect circle, while on a rectangle it creates an ellipse. Use px for consistent design system tokens; use % when you want the rounding to scale proportionally with the element size.
Set border-radius: 50% on a square element (equal width and height). The 50% value rounds each corner by half the element's dimension, and on a square, this produces a perfect circle. On a rectangular element, border-radius: 50% creates an ellipse. To create a circle from a rectangle, use clip-path: circle() instead.
Organic blob shapes are asymmetric, fluid-looking forms created using the 8-value border-radius shorthand with varying horizontal and vertical radii. They are popular in modern web design for decorative background elements, hero section accents, profile picture frames, floating accent shapes, and abstract art. The Blob mode in this tool lets you create these shapes with presets and a randomize button.
Yes. border-radius is fully animatable with CSS transitions and animations. You can smoothly transition between different radius values — for example, from a rounded rectangle to a circle or between different blob shapes. The browser interpolates each of the 8 radius values independently, producing smooth shape morphing effects. This is commonly used for hover effects and loading animations.
Common errors developers encounter and how to resolve them.
Border radius appears clipped or not fully rounded If the border-radius value exceeds half the element's smallest dimension, the browser automatically reduces the radius to prevent overlap. For example, border-radius: 200px on a 100px-wide element is equivalent to border-radius: 50px. To ensure visible rounding, keep the radius value within a reasonable range relative to the element size. Use percentage values (50%) for proportional rounding that always works regardless of element size.
Blob shape looks different in Safari vs Chrome Safari and Chrome use slightly different anti-aliasing for border-radius curves, which can make complex blob shapes appear subtly different between browsers. The shape itself is mathematically identical, but edge smoothing varies. For pixel-perfect blob shapes across browsers, consider using clip-path: path() or an SVG shape instead of border-radius. For most design purposes, the rendering difference is imperceptible.
Border-radius not applying to child content or images border-radius rounds the element's border box, but child content may overflow the rounded corners. Add overflow: hidden to the parent element to clip child content to the rounded shape. This is especially important for images inside rounded containers — without overflow: hidden, the image corners will be visible outside the rounded border.