Can I use percentage values?

Yes. CSS border-radius accepts percentages (e.g. 50% for a circle on a square). This generator uses pixels by default; you can edit the copied CSS and change px to % if needed.

Yes. The CSS Border Radius Generator runs in your browser with no sign-up or server uploads. All processing is local and free.

CSS Tools

CSS Border Radius Generator

Generate CSS border radius for rounded corners with 80+ Effects and Presets. Instant Live preview and copy cross-browser supported CSS and Tailwind code.

100% FreeNo LoginFaster Tool

Other CSS Tools

View all

Overview

Understand Border Radius with CSS & Tailwind

border-radius rounds the corners of an element. You can use one value for all corners (e.g. 12px or 50%) or up to four values for top-left, top-right, bottom-right, and bottom-left. Percentages are relative to the element’s dimensions (50% on a square makes a circle).

How to use

How to Use CSS Border Radius Generator

1
Choose uniform or per-corner
Toggle Uniform radius in Configuration to use one value for all four corners, or turn it off to set Top left, Top right, Bottom right, and Bottom left independently (in pixels).
2
Adjust radius values
Use the number inputs to set the radius in pixels. The Live Preview updates instantly. For pill/capsule shapes use a large value (e.g. 9999px); for sharp corners use 0.
3
Pick a preset (optional)
Scroll to 80+ Border Radius Effects and click any preset (e.g. Blob, Message Bubble, Lens, Stamp) to apply that shape. You can then fine-tune the values in Configuration.
4
Copy CSS or Tailwind code
In the Generated CSS tab you get cross-browser prefixed border-radius (webkit, moz, ms, o, standard). In the Tailwind CSS tab you get the matching class or arbitrary value. Click Copy and paste into your project.

Features

Top Features of CSS Border Radius Generator

Uniform & per-corner control

Set one radius for all corners or define top-left, top-right, bottom-right, and bottom-left separately for asymmetric and organic shapes.

80+ presets

One-click presets for Blob, Bubble, Lens, Stamp, Card, Tag, Stadium, and many more. Great for chat bubbles, badges, and modern UI patterns.

Live preview

See the rounded shape update in real time as you change values or apply presets. The selected preset name appears as a tag next to the preview header.

Cross-browser CSS & Tailwind

Get prefixed CSS (-webkit-, -moz-, -ms-, -o-, standard) for maximum compatibility, plus ready-to-use Tailwind class names or arbitrary values.

FAQ

Frequently Asked Questions - FAQs

Quick answers about CSS Border Radius Generator.

border-radius rounds the corners of an element. You can set one value for all corners or up to four values for top-left, top-right, bottom-right, and bottom-left. Values can be in px, %, or other CSS units.

Love this Tool? Share it Now!

Help others discover this free tool

Explore

More tools you may like

View all

Social ToolsFree Instagram Reel Downloader Social ToolsFree YouTube Thumbnail Downloader (HD)Social ToolsFree Facebook Video Downloader Social ToolsFree Facebook Reel Downloader Social ToolsFree Twitter Video Downloader Social ToolsYouTube Title & Description Extractor CSS ToolsBox Shadow CSS Generator CSS ToolsCSS Border Generator CSS ToolsCSS Transform Generator CSS ToolsCSS Transition & Animation Generator CSS ToolsNeumorphism CSS Generator CSS ToolsGlassmorphism CSS Generator

Newsletter

Stay Updated

Subscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.

How to Use CSS Border Radius Generator

Choose uniform or per-corner

Toggle Uniform radius in Configuration to use one value for all four corners, or turn it off to set Top left, Top right, Bottom right, and Bottom left independently (in pixels).

Adjust radius values

Use the number inputs to set the radius in pixels. The Live Preview updates instantly. For pill/capsule shapes use a large value (e.g. 9999px); for sharp corners use 0.

Pick a preset (optional)

Scroll to 80+ Border Radius Effects and click any preset (e.g. Blob, Message Bubble, Lens, Stamp) to apply that shape. You can then fine-tune the values in Configuration.

Copy CSS or Tailwind code

In the Generated CSS tab you get cross-browser prefixed border-radius (webkit, moz, ms, o, standard). In the Tailwind CSS tab you get the matching class or arbitrary value. Click Copy and paste into your project.

Top Features of CSS Border Radius Generator