Border Radius Generator
Generate CSS border-radius with individual corner controls, px/% units, and advanced elliptical mode. Preview in real-time.
border-radius: 16px;
Simple Radius
Set 1 to 4 values for uniform or individual rounded corners. Use pixels for fixed sizes or percentages for responsive shapes.
Elliptical Corners
Advanced mode lets you set separate horizontal and vertical radii per corner, creating asymmetric oval-shaped curves.
50% = Circle
Setting all corners to 50% on a square element creates a perfect circle. This is the most common pattern for avatar images and icons.
How to Use Border Radius Generator
The Border Radius Generator lets you visually design and fine-tune CSS border-radius values for any element shape. The live preview updates instantly as you adjust corners. This tool is perfect for creating everything from subtle rounded corners to complex organic shapes like blobs, pills, and custom UI elements.
Open the Border Radius Generator
Navigate to the Border Radius Generator from the developer tools menu. The tool provides an interactive visual editor that runs in your browser with instant shape preview as you modify values.
Adjust Individual Corners
Drag the corner handles or use the input fields to set the radius for each corner independently: top-left, top-right, bottom-right, and bottom-left. This gives you precise control over the element shape.
Use Advanced Elliptical Radii
Toggle the advanced mode to set separate horizontal and vertical radii for each corner, enabling elliptical curves and complex organic shapes beyond simple circular rounding.
Preview the Shape in Real Time
Watch the preview element update instantly as you modify values. Resize the preview container to verify how the border radius looks at different element dimensions and aspect ratios.
Copy the CSS Code
Copy the generated CSS border-radius property from the code output panel. The tool provides both shorthand and longhand CSS syntax for maximum compatibility and clarity.
Common Use Cases
UI Component Design
Define consistent border-radius values for buttons, inputs, cards, and modals to establish a cohesive design language across your entire application.
Avatar and Profile Images
Create circular or rounded-square avatar frames for user profile pictures, team member displays, and social media integration components.
Creative Shape Generation
Design organic blob shapes, speech bubbles, and decorative elements using advanced elliptical border-radius values for unique visual effects.
Design System Documentation
Generate exact border-radius tokens for your design system documentation, ensuring developers implement consistent corner rounding across all platforms.
Pro Tips
- -Use a value of 50% on a square element to create a perfect circle, or on a rectangle to create a pill or capsule shape.
- -Apply larger radii to the top corners and zero to the bottom corners for tab-like or ticket-shaped UI components.
- -Use the eight-value syntax (four horizontal / four vertical) to create unique organic shapes for creative design projects.
- -Keep border-radius values consistent across similar UI elements to maintain visual coherence throughout your design system.
- -Test rounded corners with borders and outlines, as some combinations may render differently across browsers.
You might also like
Code Diff
Compare two code files and highlight differences line by line.
DeveloperHash Generator
Generate MD5, SHA-1, SHA-256 and SHA-512 hashes from any text.
DeveloperJPG to PDF
Combine one or more images into a single PDF.
PDFText Case Converter
Convert text between uppercase, lowercase, title case and more.
Text