Border radius

CSS Border Radius Generator

Drag the sliders for each corner — linked or individual — and watch the shape update live. Switch on elliptical radii for organic blob shapes, then copy the CSS.

1. Corners

Local

2. Preview & CSS

CSS
About this tool

About CSS Border Radius Generator

The CSS Border Radius Generator gives a slider for each corner — linked or individual — and supports elliptical radii for organic blob shapes, with a live preview and copy-ready CSS. It is for developers shaping rounded and curved elements.

Per-corner and elliptical radius syntax is hard to write by hand. Dragging sliders against a live shape makes it intuitive, and the generated CSS is ready to use.

How to use

Step by step

  1. Drag the slider for each corner, or link them to adjust together.
  2. Switch on elliptical radii to create asymmetric, organic shapes.
  3. Watch the shape update live.
  4. Refine until the curve looks right.
  5. Copy the generated radius CSS.
Key features

What it offers

  • Per-corner radius sliders, linked or individual
  • Elliptical radii for blob shapes
  • Live shape preview
  • Copy-ready border-radius CSS
Common use cases

Where it helps

  • Rounding cards, buttons, and inputs consistently
  • Creating organic blob shapes for decorative elements
  • Designing asymmetric corners for a distinctive look
  • Matching a corner radius to a design system
Best practices

Tips for best results

  • Keep corner radii consistent across similar components for a cohesive look.
  • Use a single shared radius value in your CSS so it is easy to adjust globally.
  • For a circle, apply a 50% radius to an element with equal width and height.
Common mistakes to avoid

Pitfalls to watch for

  • Applying inconsistent radii across similar components, which looks unintentional.
  • Rounding corners so heavily that content padding looks cramped.
  • Forgetting that a fully rounded square needs equal radius and dimensions to become a circle.
Benefits

Why people use it

Intuitive shaping

Drag sliders instead of guessing values.

Organic shapes

Elliptical radii enable blob forms.

Per-corner control

Round each corner independently.

Private

Shaping happens in the browser.

FAQ

Common questions

Linked applies one value to all four corners. Individual lets you set each corner separately for asymmetric shapes.
Each corner can have a horizontal and vertical radius, producing soft, organic "blob" curves rather than circular ones.
Yes. The tool produces a clean border-radius value, using the horizontal / vertical slash syntax when elliptical mode is on.
No. The CSS is generated entirely in your browser.

Related tools

HTML Image Generator

Generate a clean <img> tag with a data URI, alt text, dimensions, lazy loading, class, and id.

Launch tool

CSS Background Generator

Build a background-image rule with size, repeat, position, attachment, origin, and clip, with live preview.

Launch tool

Markdown Image Generator

Create inline or reference-style Markdown image syntax with alt text and an optional title.

Launch tool
Private by design

This runs entirely in your browser

No file or text you enter here is uploaded. Encoding and decoding happen on your device using native browser APIs — close the tab and nothing remains on a server.

Install Toolisco Add it to your device for offline, one-tap access.