Generate CSS border radius for rounded corners with 80+ Effects and Presets. Instant Live preview and copy cross-browser supported CSS and Tailwind code.
px
px
px
px
-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;
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]
Create rounded corners for any element in seconds. Follow these steps to generate cross-browser border-radius CSS and Tailwind code with live preview.
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).
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.
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.
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.
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).
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.
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.
Our CSS Border Radius Generator gives you everything you need to create rounded corners for buttons, cards, modals, and more.
Set one radius for all corners or define top-left, top-right, bottom-right, and bottom-left separately for asymmetric and organic shapes.
One-click presets for Blob, Bubble, Lens, Stamp, Card, Tag, Stadium, and many more. Great for chat bubbles, badges, and modern UI patterns.
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.
Get prefixed CSS (-webkit-, -moz-, -ms-, -o-, standard) for maximum compatibility, plus ready-to-use Tailwind class names or arbitrary values.
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.
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.
🚀
Help others discover this tool quickly
Discover more free tools to boost your productivity
Box
Create beautiful box shadow with our free box shadow css generator. Generate custom box shadow css with 60+ preset effects, live preview & instant Tailwind and CSS box shadow code.
Gradient
Create beautiful gradient background using tailwind CSS Gradient Generator. Use 90+ presets to generate customized tailwind, CSS gradient background code quickly with live preview.
HEX: #ff5733
RGB: 255, 87, 51
HEX: #4a90e2
RGB: 74, 144, 226
Convert HEX color codes to RGB values instantly with our free HEX to RGB converter. Learn how HEX to RGB conversion works, understand color formats, and get accurate RGB values for web development.
Blog Post
Transform your content...
Social Post
Transform any blog post into engaging, platform-optimized content using our Blog to Social Media Post Generator. Powered by AI to maintain your message while adapting tone and style.
Subscribe to FrontendGeek Hub for frontend interview preparation, interview experiences, curated resources and roadmaps.
All in One Preparation Hub to Ace Frontend Interviews. Master JavaScript, React, System Design, and more with curated resources.
© 2026 FrontendGeek. All rights reserved
