AppsFactory

CSS Border Radius Generator

Create custom border-radius values visually with live preview

Preview

Generated CSS

border-radius: 0%;

Corner Radii

0%
0%
0%
0%

Box Size

300px
300px

Appearance

#6366f1

Presets

CSS Border Radius Generator - Design Rounded and Organic Shapes

Fine-tuning border radius values by hand is tedious, especially when you want asymmetric or organic shapes. The CSS Border Radius Generator gives you a visual editor for crafting everything from simple rounded corners to complex blob-like forms, with instant CSS output.

Features

  • Individual corner control - Set each of the four corners independently for asymmetric designs
  • Advanced 8-value syntax - Use the full border-radius shorthand with separate horizontal and vertical radii per corner
  • Organic shape mode - Create fluid, blob-style shapes by manipulating all eight radius values visually
  • Live shape preview - See your element update in real time as you adjust sliders or drag control points
  • Presets library - Quickly apply common shapes like pill buttons, circles, rounded cards, and speech bubbles
  • Unit switching - Toggle between pixels and percentages depending on your layout needs
  • Copy-ready CSS - One click to copy the complete border-radius declaration

How to Use

  1. Select a preset shape or start with a square element.
  2. Drag the corner handles on the preview to adjust individual radii visually.
  3. For organic shapes, switch to advanced mode and manipulate horizontal and vertical radii separately.
  4. Fine-tune values using the number inputs if you need precise measurements.
  5. Copy the generated CSS and apply it to your project.

Use Cases

  • Designing rounded buttons and input fields with consistent styling
  • Creating organic blob shapes for decorative backgrounds and hero sections
  • Building avatar containers and profile image masks
  • Experimenting with creative card and modal border styles

FAQ

What is the 8-value border radius syntax?

The full border-radius shorthand supports four horizontal radii and four vertical radii separated by a slash, like border-radius: 10px 20px 30px 40px / 50px 60px 70px 80px. This tool makes working with that syntax intuitive through visual handles.

Can I create a perfect circle?

Yes. Set the element to equal width and height, then apply border-radius: 50%. The presets include a circle option that does this automatically.

Does it work with images?

The generated CSS works on any HTML element, including containers that hold images. Pair it with overflow: hidden to clip images to the shape you create.