BlinkCalc logoBlinkCalc.

CSS Border Radius Generator

Visually build CSS border-radius values and copy the CSS code.

Live CSS previewIndividual cornersCopy-ready CSSUpdated May 2026

CSS border radius generator

Use one value for all corners or adjust corners individually. Copy the generated CSS into your stylesheet or component.

px
px

Corner radius controls

px
px
px
px

Presets

px

Live preview

Current preset: Card

260px × 170px

Border radius

16px

Preview style

#EEF2FF · 2px

Generated CSS

Copy-ready CSS for your stylesheet or component.

border-radius: 16px;

Local CSS generation

All values are processed instantly in the browser with no backend calls.

Preview-first workflow

See rounded cards, pills, circles, and blobs before copying CSS.

Copy-ready output

Generate shorthand or longhand border-radius CSS for frontend projects.

Dynamic Radius Insights

All corners use the same 16px radius.
Current preview size is 260px by 170px.
Shorthand CSS is compact and easy to paste.

How Border-Radius Works

Corner curve

border-radius controls how rounded an element’s corners are.

One value

One value applies the same radius to every corner.

Four values

Four values control top-left, top-right, bottom-right, and bottom-left.

Percentages

Percentage radii are based on the element’s dimensions.

Elliptical

Slash syntax creates separate horizontal and vertical curves.

Uniform, Individual Corners, and Elliptical Radii Explained

Uniform radius

Gives all corners the same curve for clean cards, panels, and buttons.

Individual corners

Creates asymmetric UI shapes and custom visual accents.

Clockwise order

Shorthand values follow top-left, top-right, bottom-right, bottom-left.

Longhand CSS

Longhand properties are easier to read when editing one corner.

Elliptical radii

A slash separates horizontal and vertical radius values.

Organic shapes

Blob-like shapes often use mixed or elliptical corner values.

Units, Percentages, Pills, Circles, and Responsive Notes

px

Fixed rounded corners that stay visually consistent across layouts.

rem and em

Scale with font size, useful for design systems and accessible UI.

%

Scales with element dimensions and can create circles or ovals.

50%

On a square, 50% creates a circle.

9999px

Often used for pill buttons and rounded badges.

overflow hidden

Use overflow-hidden when child content must be clipped to rounded corners.

Common Border-Radius Examples

border-radius: 8px;
border-radius: 16px;
border-radius: 9999px;
border-radius: 50%;
border-radius: 12px 24px 12px 24px;
border-top-left-radius: 20px;
border-radius: 40px 10px 40px 10px;
border-radius: 40px 20px 60px 10px / 20px 40px 10px 60px;

Frontend, UI, and Design-System Use Cases

Rounded cards
Buttons and pills
Avatars
Modals and panels
Badges and chips
Image thumbnails
Product cards
Mobile app UI
Design tokens
CSS prototyping

Privacy and Local Processing Notes

Local values

Border-radius values are processed locally in the browser.

No account

No sign-up or account is required.

No backend storage

Generated CSS is created instantly on the page.

Copy control

Copied CSS stays under your control.

Fast prototyping

The tool is intended for lightweight CSS prototyping and frontend design.

Deterministic output

The generated CSS stays predictable and easy to copy.

Method Explanation

1. Choose the preview size and unit.
2. Set one uniform radius or adjust each corner.
3. Optionally choose a preset such as card, pill, circle, or blob.
4. Preview the rounded shape instantly.
5. Generate shorthand or longhand CSS.
6. Copy the CSS into a stylesheet, component, or design system.

Frequently Asked Questions

CSS border-radius controls how rounded an element’s corners are. One value applies to every corner, while four values control each corner individually.

Related tools

More tools to try

Box Shadow Generator
CSS Gradient Generator
Color Picker
Pixel Converter
Color Code Converter