PouyaWeb Border Radius Generator

Border Radius Generator
for Modern UI

Create smooth corners, modern cards and organic blobs. Adjust each corner or use ready-made presets, then copy CSS or Tailwind classes in one click.

Live Preview
Corner Controls
Top-Left 24 px
Top-Right 24 px
Bottom-Right 24 px
Bottom-Left 24 px
Presets
CSS
border-radius: 24px 24px 24px 24px;
Tailwind
rounded-[24px_24px_24px_24px]

Border Radius Generator for Modern UI Designers and Developers

This free border radius generator helps you design smooth corners, modern cards and organic blob shapes in seconds. Adjust each corner individually, see the live preview update in real time and copy clean CSS or Tailwind border-radius code directly into your project.

The tool is part of the PouyaWeb DevLab collection, built for front-end developers, UI designers and product teams who want faster workflows and consistent visual styles across their components. Instead of guessing values or testing random radii in the browser, you can tune every corner visually and generate production-ready code in one click.

Why use a Border Radius Generator instead of guessing values?

Well-balanced corner radii make your interface feel more professional and trustworthy. With this CSS border radius generator you can:

  • Control each corner independently for asymmetric or blob-style shapes.
  • Use presets like soft cards, sharp corners, pills and organic blobs as starting points.
  • Copy a single border-radius line for CSS, or a matching Tailwind utility class.
  • Preview the result on a glassmorphism-inspired card, similar to real UI components.

If you already use our Gradient Generator, this tool fits perfectly into the same modern UI workflow. Combine gradients, shadows and carefully tuned radii to create premium-looking buttons, cards, navigation bars and hero sections.

How to read and customize the CSS border-radius values

The generator outputs the standard CSS syntax: border-radius: top-left top-right bottom-right bottom-left;. For example, a value like border-radius: 24px 40px 16px 8px; means a softer top-right corner and a tighter bottom-left corner. You can paste this line directly into any CSS file, utility class or component style.

If you want to learn more about how the border-radius property works, check the official MDN documentation for border-radius . There you can find advanced examples, slash notation and elliptical radii.

Part of the PouyaWeb DevLab UI generator toolkit

The Border Radius Generator is one piece of a larger toolkit that also includes gradient, glassmorphism and shadow generators. Our goal is to give you a compact set of focused tools that help you design modern, minimal and consistent interfaces without leaving the browser.

Bookmark this page and use it whenever you need to quickly explore new shapes, tweak card corners or experiment with playful blobs. With a dedicated border radius tool like this, you can focus less on guesswork and more on the details that make your UI feel truly polished.