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.
Live Preview
BadgeConfiguration
px
px
px
px
Generated CSS (cross-browser)
-webkit-border-radius: 9999px 8px 9999px 8px; -moz-border-radius: 9999px 8px 9999px 8px; -ms-border-radius: 9999px 8px 9999px 8px; -o-border-radius: 9999px 8px 9999px 8px; border-radius: 9999px 8px 9999px 8px;
Tailwind CSS
className="rounded-tl-[9999px] rounded-tr-[8px] rounded-br-[9999px] rounded-bl-[8px]"
Class: rounded-tl-[9999px] rounded-tr-[8px] rounded-br-[9999px] rounded-bl-[8px]
How to Use CSS Border Radius Generator
Create rounded corners for any element in seconds. Follow these steps to generate cross-browser border-radius CSS and Tailwind code with live preview.
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.
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).
CSS
Standard shorthand: border-radius: 12px; or border-radius: 8px 16px 8px 16px;. For older browsers, use vendor-prefixed properties (-webkit-border-radius, -moz-border-radius, etc.); the generator outputs these for you.
Tailwind CSS
Use utilities like rounded, rounded-lg, or arbitrary values: rounded-[12px] for uniform radius. For per-corner control use rounded-tl-[8px] rounded-tr-[16px] rounded-br-[8px] rounded-bl-[16px]. The generator shows the exact class names for your current values.
Top Features of CSS Border Radius Generator
Our CSS Border Radius Generator gives you everything you need to create rounded corners for buttons, cards, modals, and more.
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.
Frequently Asked Questions
What is border-radius in CSS?
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.
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.
Is this tool free?
Yes. The CSS Border Radius Generator runs in your browser with no sign-up or server uploads. All processing is local and free.
More Tools
Discover more free tools to boost your productivity
Gradient
HEX: #ff5733
RGB: 255, 87, 51
HEX: #4a90e2
RGB: 74, 144, 226
Blog Post
Transform your content...
Social Post
