Pinatool
Standard & 8-Value Elliptical CSS

CSS Border Radius Generator

Shape rounded corners, pills, and organic elliptical curves visually. Drag corner handles, switch between pixels and percentages, and export copy-ready CSS.

Interactive Preview

Drag corner handles or use arrow keys to adjust each radius.

border-radius

32px 32px 32px 32px

Presets

1. Top Left
2. Top Right
3. Bottom Right
4. Bottom Left
Runs 100% locally in your browser.

Generated CSS

Copy the CSS rule or download a stylesheet file for your project.

.rounded-element {
  border-radius: 32px 32px 32px 32px;
}

How to Generate Custom Border Radius CSS

1

Pick a Preset or Drag Handles

Start from Subtle, Pill, Leaf, or Organic presets, or drag the numbered corner handles directly on the preview box.

2

Customize Units & Elliptical Axes

Unlink corners for asymmetric curves, convert between px and %, or enable 8-value elliptical mode for separate X and Y radii.

3

Copy or Download CSS

Copy the generated border-radius rule to your clipboard or download it as a standalone stylesheet.

Border Radius Generator Features

8-Value Elliptical Control

Toggle elliptical syntax to tune horizontal and vertical corner curves independently for organic cards and blobs.

Proportional px & % Conversion

Switch between pixels and percentages at any time while preserving the visual curve relative to your preview box.

Private Browser Processing

Everything renders and exports directly inside your browser with zero server requests or tracking.

Frequently Asked Questions

What is 8-value elliptical CSS border-radius?

Standard border-radius accepts up to four values for the four corners. Adding a forward slash (`/`) lets you specify separate horizontal and vertical radii (`h1 h2 h3 h4 / v1 v2 v3 v4`), creating organic curves and asymmetric shapes.

When should I use px versus % for border-radius?

Use `px` when you want consistent corner rounding regardless of element size, such as buttons and cards. Use `%` when you want corners to scale proportionally with the element dimensions, such as circles (`50%`) or organic blob shapes.

How do linked and independent corners work?

When Corners Linked is active, dragging any handle or editing any input updates all four corners together. Unlink corners to shape each corner independently for asymmetric layouts, tabs, or leaf cards.

Can I adjust the corner handles with my keyboard?

Yes. Focus any corner handle button in the preview and press the arrow keys to nudge its radius by 1 unit, or hold Shift with an arrow key to step by 10 units.

Does this tool send any data to a server?

No. All calculations, previews, and CSS exports run locally in your browser without uploading anything to Pinatool servers.

Related CSS & Design Tools

CSS Blob Generator

Generate seeded organic CSS blobs with 8-value border-radius, gradients, and SVG export.

CSS Clip-Path Generator

Design polygon, circle, ellipse, and inset clip paths visually with live handles.

CSS Gradient Generator

Create smooth linear, radial, and conic CSS gradients with live color stops.