Skip to main content
CompressNConvert

CSS Border Radius Generator

Generate CSS border-radius for rounded cards, pills, and organic blobs. Adjust individual corners or elliptical radii and copy CSS or Tailwind output.

Runs locally in your browser

Shape

Drag any handle on the edges of the box.

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Generated code

border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

Mode

Corner style

Presets

Values

Percentages, clockwise from the top left.

Complete tool guide

CSS Border Radius Generator guide

Generate CSS border-radius values for rounded cards, pills, tabs, and organic shapes. Use uniform mode for pixel-based corners or organic mode for separate horizontal and vertical percentage radii, then copy the result into CSS or Tailwind.

Your input is processed in the current browser tab and is not sent to the application server.

Why use this tool?

  • Edit each corner visually instead of memorizing shorthand order.
  • Compare a shape at different widths and heights.
  • Copy elliptical radii for organic CSS shapes without an image asset.

Common use cases

  • Setting a consistent corner radius scale for a design system
  • Building speech bubbles and tabs with one squared corner
  • Creating organic blob shapes for decorative backgrounds
  • Producing pill-shaped buttons and badges

How to use it

  1. 1

    Choose uniform corners for interface work, or organic for a free shape.

  2. 2

    Drag the handles on the edges of the preview.

  3. 3

    Adjust the box size to check the shape at the dimensions you will use.

  4. 4

    Copy the generated CSS.

Controls and results explained

Uniform mode

Set pixel radii for the top-left, top-right, bottom-right, and bottom-left corners. Linked corners change together.

Organic mode

Values before the slash are horizontal radii; values after it are vertical radii. Each group follows the same clockwise corner order.

Preview dimensions

Width and height affect percentage radii. Test both a square and a rectangle if the shape will resize in your layout.

Worked examples

Create a rounded card

Start with: Uniform mode and the Rounded preset

  1. Choose Uniform and select Rounded.
  2. Copy the CSS declaration.
border-radius: 16px 16px 16px 16px;

All corners use a fixed 16px radius. The equivalent compact shorthand is border-radius: 16px.

Create an organic blob

Start with: Organic mode and the Blob preset

  1. Choose Organic and select Blob.
  2. Use a square preview first, then vary width and height.
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;

The slash separates horizontal and vertical radii. Resizing the box changes the visible shape.

Percentage versus pixel radii

Pixel radii specify fixed lengths. Percentage horizontal radii refer to width and vertical radii to height, so 50% makes a circle only when the box is square.

Overlapping radii

When adjacent radii do not fit an edge, the browser scales them down. This can make the rendered curve differ from a literal interpretation of individual handle values.

Clipping child content

border-radius rounds the box’s own background and border. To clip overflowing child images or content, consider overflow: hidden and check that it does not hide focus indicators.

Practical tips for better results

  • Use linked pixel corners for a consistent card shape.
  • Try the Chat preset for a smaller corner on one side.
  • Check organic shapes at their final aspect ratio before exporting.

Frequently asked questions

How do I make a circle with border-radius?

Use 50% radii on a square box. On a rectangle the same radii produce an ellipse.

Why does my image ignore rounded corners?

The parent’s radius does not necessarily clip its children. Apply a radius to the image itself or use an appropriate overflow rule on the parent.

Is a CSS blob an SVG path?

No. This tool produces a rounded rectangular box using elliptical corners. Use a path-based tool for shapes that cannot be described with border-radius.

What to check before using the result

  • Border radius cannot create arbitrary concave paths or holes.
  • The same percentage values produce different geometry at different aspect ratios.

Keep working

Related color & design

Continue with another focused tool from the same collection.

CSS Gradient GeneratorBuild linear, radial, and conic gradients with draggable multi-stop control.CSS Box Shadow GeneratorStack multiple shadow layers and drag the light direction on a live preview.CSS Text Shadow GeneratorLayer text shadows for glow, outline, letterpress, and long-shadow effects.Glassmorphism GeneratorDesign frosted-glass panels with blur, tint, border, and shadow controls.