Skip to content
Got A Tool
Developer Tools

CSS Border Radius Generator

Create and copy an explicit CSS border-radius value from four pixel corner settings.

Local CSS generation. Set four whole-number pixel values to shape one rectangle. Your choices remain in this browser tab and are never uploaded.

Values follow CSS shorthand order: top left, top right, bottom right, then bottom left. This focused tool uses pixels only, from 0 px to 200 px.

Preview card
border-radius: 16px 16px 16px 16px;

Data handling

Storage and export controls

Retention
The tool's working state is kept only while this page is open. Inputs and results are not saved to persistent storage by Got A Tool.
Export
The tool may prepare a result after you run it. It downloads or copies it only when you choose that action.

Advertising and analytics are separate site services. We do not send selected tool input to them. Read the Privacy Policy for details.

How it works

Create a CSS border radius in three steps

01

Set each corner

Enter pixel values for the top-left, top-right, bottom-right, and bottom-left corners.

02

Review the shape

Use the live rectangle preview to compare each corner.

03

Copy the declaration

Copy the explicit border-radius CSS declaration into a stylesheet or component.

Clear limit

A simple rectangle preview is not a component library.

This tool creates one pixel-based border radius for a rectangle. It does not create percentage or elliptical radii, responsive tokens, clipping paths, focus styles, or a complete component design system.

Four corners

Each physical corner has one clearly labeled pixel value.

Visible result

The preview follows the current CSS shorthand order.

Copyable CSS

Copy one complete CSS declaration for review or reuse.

Local processing

Settings and generated CSS remain in the current browser tab.

Keep working

Related tools

CSS Box Shadow Generator

Create and copy one explicit CSS box-shadow value from pixel settings and an opaque HEX color.

Open tool →

CSS Gradient Generator

Create and copy a two-color linear CSS gradient from explicit sRGB colors and a degree angle.

Open tool →

HEX, RGB & HSL Color Converter

Convert one opaque sRGB color between normalized HEX, RGB, and HSL values locally.

Open tool →

Color Contrast Checker

Calculate the WCAG contrast ratio between two hexadecimal colors and check text-size thresholds.

Open tool →