CSS Border Radius Generator
Create CSS border radius values with independent corner controls, preset shapes, and a live preview. Copy the code instantly.
About CSS Border Radius Generator
The CSS border-radius property rounds the corners of any element. It accepts values in pixels (absolute) or percentages (relative to element size). This generator gives you independent control over each corner with sliders and a live preview, plus preset shapes for common patterns.
Understanding the border-radius Syntax
The property has a shorthand that depends on how many values you provide:
| Values | Meaning | Example |
|---|---|---|
| 1 value | All four corners the same | border-radius: 12px; |
| 2 values | Top-left/bottom-right, top-right/bottom-left | border-radius: 12px 0; |
| 3 values | Top-left, top-right/bottom-left, bottom-right | border-radius: 12px 8px 0; |
| 4 values | Top-left, top-right, bottom-right, bottom-left (clockwise) | border-radius: 12px 8px 4px 0; |
The order follows the clock: top-left, top-right, bottom-right, bottom-left. This generator shows the four-value output when corners differ, or the single-value shorthand when they match.
Pixels vs Percentages
| Unit | Behaviour | Best For |
|---|---|---|
| px | Fixed radius regardless of element size | Consistent corner rounding (buttons, cards, inputs) |
| % | Relative to element dimensions (width for horizontal, height for vertical) | Responsive shapes (circles, ellipses) |
50% on a square element creates a perfect circle. 50% on a rectangle creates an ellipse. Using 9999px (a very large pixel value) creates fully rounded ends regardless of element size - the standard technique for pill-shaped buttons.
Common Border Radius Patterns
| Shape | CSS | Use Case |
|---|---|---|
| Subtle rounding | border-radius: 4px; | Inputs, small buttons |
| Card rounding | border-radius: 8px; or 12px; | Content cards, panels |
| Pill / capsule | border-radius: 9999px; | Tags, badges, pill buttons |
| Circle | border-radius: 50%; (equal width/height) | Avatars, icon containers |
| Leaf | border-radius: 0 50% 0 50%; | Decorative accents |
| Drop | border-radius: 50% 50% 50% 0; | Map pins, callouts |
| Ticket notch | border-radius: 12px 12px 50% 50%; | Ticket or coupon shapes |
The Elliptical Radius (Two-Part Syntax)
CSS border-radius also supports elliptical corners using a slash:
border-radius: 50px / 25px;
Values before the slash are horizontal radii; values after are vertical radii. This creates corners that are rounder in one direction than the other - useful for organic, blob-like shapes. This generator focuses on the more common single-value syntax, but the CSS property itself is capable of complex organic forms when both radii are specified independently for each corner.
Border Radius in Design Systems
| Design System | Small | Medium | Large | Full |
|---|---|---|---|---|
| Tailwind CSS | rounded-sm (2px) | rounded-md (6px) | rounded-lg (8px) | rounded-full (9999px) |
| Material Design | 4px | 8px | 16px | Fully rounded |
| Apple HIG | 6px | 10px | 13px | Continuous corners |
| Bootstrap | 0.2rem | 0.25rem | 0.3rem | 50rem |
Apple's design uses "continuous corners" (also called "squircles") rather than standard circular arcs. CSS border-radius uses circular arcs, so the iOS look requires additional techniques or SVG to replicate exactly. For most web use cases, circular border-radius is the standard.
Browser Support
The border-radius property is supported in all modern browsers without vendor prefixes. It has been universally supported since IE9 (2011). The elliptical two-value syntax is also universally supported.
Pair rounded elements with depth from the CSS Box Shadow Generator. For more complex shape clipping, the CSS Clip Path Generator handles custom polygons and masks.
Everything runs locally in your browser. Your CSS is never sent to any server.
Frequently Asked Questions
Can I set each corner to a different value?
Yes. Toggle off "Link all corners" to get independent sliders for top-left, top-right, bottom-right, and bottom-left. Each corner can be set separately using either the range slider or the numeric input. The preview updates in real time.
What is the difference between px and percent units?
Pixel values give you absolute rounding that stays the same regardless of element size. Percentage values are relative to the element dimensions, so 50% on a square creates a perfect circle. Use px for consistent corner rounding and percent for responsive shapes.
How do I make a perfect circle?
Set all four corners to 50% or use the Circle preset. The element must also be square (equal width and height) for the result to be a perfect circle. If the element is rectangular, 50% creates an ellipse instead.
What does the Pill preset do?
The Pill preset sets all corners to 9999px, which creates fully rounded ends on any element regardless of its height. This is the standard technique for pill-shaped buttons and tags in CSS.
Is this tool free to use?
Yes, completely free. Everything runs in your browser with no server processing. Your CSS code is never uploaded anywhere.
Related Tools
Link to this tool
Copy this HTML to link to this tool from your website or blog.
<a href="https://toolboxkit.io/tools/css-border-radius-generator/" title="CSS Border Radius Generator - Free Online Tool">Try CSS Border Radius Generator on ToolboxKit.io</a>