Border Radius Generator
Create CSS border-radius properties
Input & options
Quick presets & examples
Your inputs are never uploaded or stored.
Results
Enter your values to see the result.
About Border Radius Generator
Our free CSS border radius generator gives you complete visual control over rounded corners for any HTML element. Adjust each corner independently or link them all together, choose from multiple units (px, %, em, rem), and see the results instantly in the live preview panel.
Rounded corners are a fundamental part of modern web design. From subtle 4px rounds on cards and inputs to full 50% circles for avatars, the border-radius property shapes how users perceive your interface. Adjust each corner, watch the live preview change, and copy the CSS once the shape looks right, instead of editing and reloading a stylesheet.
The generator includes 10 preset shapes such as Square, Circle, Pill, Teardrop, and Organic, plus a random generator for creative exploration. Output is provided in multiple formats including CSS shorthand, individual corner properties, a ready-to-use CSS class, and an approximate Tailwind CSS equivalent.
Key Features
- Independent control over each corner: top-left, top-right, bottom-right, and bottom-left
- Link corners toggle for uniform radius adjustment across all four corners
- Four unit options: pixels (px), percentage (%), em, and rem for responsive designs
- Real-time preview with adjustable element size (100-300px) and custom color picker
- 10 preset shapes: Square, Rounded, Circle, Pill, Top Rounded, Bottom Rounded, Left Rounded, Right Rounded, Teardrop, and Organic
- Visual corner value indicators showing exact radius at each corner
- Random radius generator for creative inspiration and experimentation
- Multiple CSS output formats: shorthand, individual properties, CSS class, and Tailwind CSS approximation
- One-click copy to clipboard for instant use in your projects
- Slider controls with range display for intuitive value adjustment
How to Use the Border Radius Generator
- Select your unit: Choose px for fixed sizes, % for responsive scaling, or em/rem for typography-based sizing.
- Adjust corner values: Use the sliders to set each corner's radius individually, or enable "Link all corners" for uniform rounding.
- Try preset shapes: Click any of the 10 preset shapes like Circle, Pill, or Teardrop to instantly apply common configurations.
- Preview the result: View the live preview with adjustable size and color to see exactly how your border radius will look.
- Copy the CSS: Click Copy to grab the border-radius CSS code, or use the alternative formats section for individual properties or Tailwind classes.
Use Cases
- Button styling: Create pill-shaped buttons, subtly rounded call-to-action buttons, or fully circular icon buttons.
- Card components: Apply consistent rounded corners to cards, modals, and dialog boxes in your design system.
- Avatar images: Use 50% border-radius on square images to create perfect circular user avatars and profile pictures.
- Input fields: Add gentle rounding to form inputs, textareas, and select dropdowns for a modern look.
- Navigation elements: Style tabs, badges, tags, and navigation items with appropriate corner rounding.
- Creative shapes: Combine asymmetric corner values to create organic blobs, teardrops, and unique decorative elements.
- Tooltip and popover design: Apply precise corner rounding to tooltips, popovers, and dropdown menus.
- Responsive design tokens: Establish consistent border-radius values across your project using em or rem units.
Frequently Asked Questions
What is the difference between px and % for border-radius?
Pixel (px) values create a fixed radius regardless of element size. Percentage (%) values are relative to the element's dimensions, making them responsive. For example, 50% on a square element creates a perfect circle.
How do I make a perfect circle with CSS?
Set border-radius to 50% on an element with equal width and height. The Circle preset in this tool applies exactly that configuration.
Is border-radius supported in all browsers?
Yes, the border-radius CSS property is fully supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes are needed.
Tips & Best Practices
- Use consistent values: Establish 2-3 standard border-radius values in your design system (e.g., 4px, 8px, 16px) for visual consistency.
- Use percentages for circles: Set 50% on square elements for perfect circles that scale automatically with size changes.
- Keep it subtle for forms: Small values (2-8px) work best for input fields and form elements to maintain a clean, professional look.
- Try asymmetric corners: Different values on each corner create unique shapes that can add character to decorative elements.
- Consider responsive units: Use em or rem for border-radius values that scale proportionally with your typography.
- Test with content: Always check how rounded corners look with actual content inside the element, especially at different viewport sizes.