Fancy 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.

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