# Fancy-Border-Radius

> Visual generator for creating organic blob shapes using CSS border-radius

Fancy-Border-Radius is an interactive web tool that lets you design organic, asymmetrical shapes using CSS3 border-radius properties. It provides drag-and-drop handles to manipulate eight distinct border-radius values simultaneously. Once designed, the resulting CSS code can be copied directly for use in web projects.

Website: https://9elements.github.io/fancy-border-radius

## What it is for

- Generate organic blob backgrounds for landing pages
- Design asymmetrical UI card frames or image masks
- Copy eight-value CSS border-radius rules without manual calculation

## Features

- Interactive visual handles to adjust individual corner radii
- Full control over eight separate CSS border-radius values
- Custom width and height inputs for exact canvas dimensions
- One-click copy for the generated CSS code

## Pricing

Free and open source

## Details

- Type: Web app
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: yes
- Platforms: Web
- For: Front-end developers and web designers
- Alternative to: Blobmaker
- Tags: css, generator, front end, web design, shapes, ui

## Why it was saved

- [@ninalyre, 4 September 2024](https://www.instagram.com/reel/C_fWBbOopLY/): Allows designers and front-end developers to manipulate 8 border-radius values visually and copy the generated CSS code with one click.

## Related

- [CSS Frosted + Saturated Borders](https://xiry.app/resources/css-frosted-saturated-borders): CSS technique for dynamic, semi-transparent borders using background-clip and backdrop-filter (Tip, Free)
- [Dynamic Theming with CSS light-dark() and color-scheme](https://xiry.app/resources/dynamic-theming-with-css-light-dark-and-color-scheme): CSS pattern for switching colors across themes without duplicate selectors (Tip, Free)
- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Liquid Glass](https://xiry.app/resources/liquid-glass): React component library for Apple-style liquid glass and blur effects. (Website, Open source)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)

Updated 3 October 2026. Page: https://xiry.app/resources/fancy-border-radius

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.