Border Radius Generator
Generate CSS border-radius with visual preview. Control each corner independently, switch between pixels and percentages, and use presets for common shapes.
Unit
Link Corners
Corner Radius
Presets
Preview Appearance
CSS Code
border-radius: 8px;Live Preview
Corner Values
Tips
- • Link corners for uniform radius across all sides
- • Use % for responsive shapes that scale with element size
- • Try the Circle preset (50%) on square elements
- • Use Pill preset for fully rounded button ends
- • Experiment with blob presets for organic shapes
Live Preview
See your border radius update in real-time with customizable colors and border styles.
Individual Control
Adjust each corner independently or link them together for uniform radius.
Presets
Quick access to common shapes: circle, pill, card, rounded, and creative blob shapes.
Common Use Cases
Buttons and UI Elements
Create modern, rounded buttons with the pill or card preset. Perfect for call-to-action buttons and navigation elements.
Cards and Containers
Add subtle rounding to cards, panels, and content containers for a polished, professional look.
Profile Pictures and Avatars
Use the circle preset (50%) to create perfectly round profile pictures and avatar containers.
Badges and Tags
Create small, rounded badges and tags for labels, notifications, and status indicators.
Creative Shapes
Use blob presets to create unique, organic shapes for backgrounds, decorative elements, and artistic designs.
Frequently Asked Questions
What is border-radius in CSS?
Border-radius is a CSS property that allows you to round the corners of HTML elements. You can specify a single value to round all corners equally, or provide individual values for each corner (top-left, top-right, bottom-right, bottom-left). The property accepts various units including pixels (px), percentages (%), ems, and rems.
How do I create a perfect circle with border-radius?
To create a perfect circle, apply border-radius: 50% to an element that has equal width and height. The percentage is relative to the element's dimensions, so 50% on a square element creates a perfect circle. You can use our Circle preset to apply this instantly, or manually set all corners to 50% with the % unit selected.
What's the difference between px and % units?
Pixels (px) are absolute units that provide consistent corner rounding regardless of element size - 8px corners will always be 8 pixels rounded. Percentages (%) are relative to the element's dimensions - 10% means the corner radius is 10% of the element's width or height. Use px for consistent designs and % for responsive or proportional shapes.
Can I set different radius values for each corner?
Yes! Click the "Unlink" button to control each corner independently. The CSS longhand syntax is border-radius: top-left top-right bottom-right bottom-left. Our tool lets you adjust each corner with individual sliders and number inputs. This is useful for creating asymmetric designs and custom shapes.
What are the presets for?
Presets provide instant access to commonly used border-radius patterns. Circle (50%) creates perfect circles, Pill (999px) creates fully rounded ends for buttons, Card (8px) and Rounded (16px) provide standard UI rounding, Badge (4px) is for small elements, and Blob presets create creative organic shapes. Click any preset to apply it immediately.
How does the "Link Corners" feature work?
When corners are linked, adjusting any corner slider will update all four corners to the same value. This makes it easy to create uniform rounding. Unlink the corners to adjust each corner independently for asymmetric designs. You can toggle this feature on/off at any time.
Why use 999px for the pill preset?
A value of 999px is commonly used to create fully rounded ends on rectangular elements like buttons. Even though most elements won't be 999 pixels wide, using a very large value ensures the corners are fully rounded regardless of the element's actual dimensions. The browser will cap the radius at 50% of the element's height.
Is border-radius supported by all browsers?
Yes, border-radius is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and their mobile versions. It's been a standard CSS property since CSS3 and doesn't require vendor prefixes. The generated CSS will work across all browsers without any modifications.