CSS Border Radius Generator

How Border Radius Values Work

When you provide four values to border-radius, they apply in a specific clockwise order:

• First value (Top-Left): Rounds the top-left corner.
• Second value (Top-Right): Rounds the top-right corner.
• Third value (Bottom-Right): Rounds the bottom-right corner.
• Fourth value (Bottom-Left): Rounds the bottom-left corner.

Pixel values create fixed-radius corners, while percentage values scale relative to the element's dimensions. Percentage values are essential for creating organic shapes because they adapt to the element's size, producing smooth asymmetric curves. At 50% on all four corners, the element becomes a perfect circle (or ellipse, if width and height differ). You can also use the color converter to match your shape colors precisely across different CSS formats.

How to Create Blob Shapes in CSS

Creating a blob shape is simpler than it looks. The key is using unequal percentage values on opposing corners. When adjacent corners have significantly different values (like 30% on top-left and 70% on top-right), the border creates an asymmetric curve that mimics natural, organic forms.

• Use percentage values: Pixels create uniform curves. Percentages create the asymmetric, flowing shapes that look organic.
• Contrast opposing corners: Set top-left and bottom-right with one value, then top-right and bottom-left with a different value for a balanced blob.
• Keep values between 20–80%: Values too close to 0% or 100% make the shape look like a rectangle or circle rather than a blob.
• Combine with gradients: Pair your blob shape with a gradient background for a polished, modern look.

If you need to convert HEX to RGB values for your shape's gradient colors, our converter handles that instantly.

How to Use This Generator

Getting the right border-radius for your project should take seconds, not minutes. Here is how to use this tool effectively:

1. Adjust Corners: Use the four sliders to set different border-radius values for each corner. Each slider controls one corner independently.
2. Try Presets: Click Circle or Rounded for quick starting points, or hit Random for unexpected shape ideas you might not have considered.
3. Customize Appearance: Change the size and background color to match your design context before copying the code.
4. Preview Live: The shape updates in real time as you adjust any value—no guessing or switching back and forth.
5. Copy Code: Click Copy to grab the border-radius CSS and paste it directly into your stylesheet or component file.

The generated CSS works with any element—div, span, button, or img. Just apply the border-radius value and set a width and height on your target element.

Benefits of Using a Border Radius Generator

• Save time: Manually tweaking border-radius values in a code editor is tedious. A visual generator lets you iterate faster by seeing changes instantly.
• Discover shapes you would not think of: The Random button generates combinations you might not try on your own, sparking creative ideas for your design.
• Avoid mistakes: Typing four different percentage values by hand often leads to typos. The generator outputs clean, ready-to-use CSS every time.
• Learn by experimenting: If you are new to CSS, dragging sliders and watching how each corner changes helps you build an intuitive understanding of how border-radius works.
• Consistency across projects: Save your favorite values and reuse them to maintain a consistent visual language across different components and pages.

Pair your shapes with carefully chosen colors from our palette generator to create cohesive, professional-looking designs without opening a graphics editor.

Use Cases in Modern UI Design

• Hero section decorations: Large, semi-transparent blobs placed behind headings create a trendy, dynamic background without images.
• Avatar frames: Uneven border-radius on profile images adds personality while keeping the design clean.
• Background accents: Colored blob shapes positioned in corners or behind content sections add visual depth to flat layouts.
• Testimonial cards: Using a blob shape as a quote background or speaker avatar makes the section feel approachable and modern.
• Feature highlights: Blob-shaped containers for icons or illustrations draw attention without using traditional rectangular cards.
• Loading animations: A blob shape with a CSS animation that cycles through different border-radius values creates a satisfying morphing effect for loading indicators.

When building these components, make sure to generate color palettes that complement your blob shapes—soft pastels and gradients work especially well with organic forms. For deeper design guidance, check out our guide to using color palettes in design.

Animating Border Radius in CSS

One of the most visually satisfying uses of border-radius is animation. Because the property accepts percentage values, you can smoothly transition between different shapes—creating a morphing effect that feels organic and alive. This technique has become a staple of modern web animation, used for loading indicators, hover effects, and decorative backgrounds.

• CSS Transitions: Add transition: border-radius 0.5s ease to your element, then change the border-radius value on hover or via JavaScript. The shape smoothly morphs between states.
• CSS Keyframe Animations: Define multiple keyframes with different border-radius values to create a continuous morphing loop. This works beautifully for loading spinners and ambient background decorations.
• Performance tip: Animating border-radius is GPU-accelerated in most browsers, but combining it with transforms (transform: rotate()) can further improve smoothness by promoting the element to its own compositing layer.
• Keep it subtle: Small changes between keyframes (e.g., cycling between 40% 60% 60% 40% and 60% 40% 40% 60%) produce an elegant breathing effect. Large swings can look chaotic and distracting.

Here is a quick example of a morphing blob animation you can add to your project after generating the shape values:

@keyframes morph {
  0%   { border-radius: 30% 70% 70% 30%; }
  50%  { border-radius: 70% 30% 30% 70%; }
  100% { border-radius: 30% 70% 70% 30%; }
}

.morphing-blob {
  animation: morph 8s ease-in-out infinite;
}

Browser Compatibility & Support

The CSS border-radius property has excellent browser support and has been a standard part of CSS since the CSS3 Backgrounds and Borders Module. Here is what you need to know about compatibility:

• Modern browsers: Chrome, Firefox, Safari, Edge, and Opera all fully support border-radius with no prefixes needed. This has been the case since 2013.
• Percentage values: All modern browsers correctly interpret percentage values for border-radius, calculating them relative to the element's dimensions for each axis independently.
• Four-value syntax: Setting individual corners (border-radius: 30% 70% 70% 30%) is universally supported. The shorthand follows the same clockwise order as margin and padding.
• Older browsers: Internet Explorer 8 and below do not support border-radius. If you need to support IE8, you would need vendor prefixes (-webkit-border-radius, -moz-border-radius) or a graceful degradation strategy. For virtually all modern projects, this is not a concern.
• Animation support: CSS transitions and keyframe animations on border-radius work in all modern browsers. The animation is typically GPU-accelerated, making it performant even on mobile devices.

In short: you can use the CSS generated by this tool with confidence in any production environment targeting modern browsers. No vendor prefixes, no polyfills, no fallbacks needed.

Pixel vs Percentage: When to Use Each

Understanding when to use pixel values versus percentage values in border-radius is key to getting the results you want. They behave differently, and choosing the wrong unit can lead to unexpected shapes.

• Pixel values (px): Create a fixed-radius curve regardless of the element's size. A border-radius: 12px always produces a 12-pixel curve. This is ideal for UI components like buttons, cards, and inputs where you want consistent corner sizes across different element sizes.
• Percentage values (%): Scale relative to the element's width and height. A border-radius: 50% on a square element creates a perfect circle, but on a rectangle it creates an ellipse. This is essential for organic blob shapes because the curves adapt to the element's proportions.
• Mixing units: You can mix px and % in the same declaration (e.g., border-radius: 12px 50% 12px 50%), though this is uncommon. The results can be unpredictable and hard to maintain.
• Responsive design: Percentage values are generally better for responsive layouts because they scale with the element. Pixel values stay the same size regardless of screen width, which can look inconsistent on different devices.

This generator uses percentage values by default because they produce the most visually interesting and responsive blob shapes. For standard UI components with uniform rounded corners, pixel values are typically the better choice.

Why I Built This Tool

I kept finding myself opening a blank CodePen just to test different border-radius values for blob shapes. It was a small thing, but doing it over and over got frustrating—especially when I just wanted a quick shape for a hero section background. I figured if I needed this, other developers and designers probably did too.

So I built this generator to make the process fast and visual. Drag the sliders, see the result immediately, and copy the CSS. No signup, no paywall, no clutter. It does one thing and does it well. I use it in my own projects almost every week, and I hope it saves you the same hassle it saved me.

If you find it useful, consider sharing it with a colleague or on social media—that is the best way to support free tools like this one.

Frequently Asked Questions