The developer tools you reach for every day, all in one place.

Converters, formatters, hashes, validators, and the small utilities you keep reopening stay together instead of getting lost across tabs.

GitHub

/ Tools

■

/ Tool Finder

109 tools

/ Border Radius Generator

Unit

Presets

Link all corners

Top Left: 12px

Top Right: 12px

Bottom Left: 12px

Bottom Right: 12px

Preview Color

Preview Size: 150px

Preview

CSS Code

Individual Corner Properties

Tailwind Class

/ Selected Tool

Border Radius Generator

Visual CSS border-radius generator with individual corner control

■ 01

What is CSS Border Radius?

The CSS border-radius property rounds the corners of an element's outer border edge. You can set all four corners to the same value, or specify different values for each corner to create unique shapes.

■ 02

How does it work?

Border radius can be specified with 1 to 4 values. With 1 value, all corners are the same. With 2 values, the first applies to top-left/bottom-right and the second to top-right/bottom-left. With 3 values: top-left, top-…

■ 03

Sample Cases

Covers All corners equal, Pill shape, and Different corners so you can compare common inputs and outputs quickly.

/ Code

■

/ Integration

Source code from the selected tool, shown here alongside the live version on the right.

/ Source Code

TypeScript

typescript

// No external dependencies needed - generates CSS border-radius strings

interface BorderRadius {
  topLeft: number;
  topRight: number;
  bottomRight: number;
  bottomLeft: number;
  unit: 'px' | '%' | 'rem';
}