Border Radius Generator
Generate CSS border-radius values visually with uniform or per-corner controls - instantly and for free. Choose from 8 shape presets, switch between px and % units, and see the result live on a gradient preview box. Copy the production-ready CSS with one click. Fully private, no signup required.
Shape Presets
Radius Controls
border-radius: 16px;
Currently previewing: Extra Rounded
Live Preview
Why Use Our Border Radius Generator?
Live Preview & Instant CSS
The border radius generator updates the live preview and CSS output on every change - no button to press. See exactly how each corner radius affects the shape and copy the CSS declaration in one click.
Uniform & Per-Corner Controls
Switch between uniform mode (single slider for all corners) and per-corner mode (independent values for each corner). Choose your unit - px for standard boxes and % for elliptical shapes.
100% Private - No Upload
All border radius generation happens locally in your browser. Your design choices never leave your device and are never sent to any server - safe for client projects and proprietary design systems.
Free & No Limits
Generate unlimited border radius styles with no signup, no subscription, and no usage caps. The border radius generator is completely free forever with no ads blocking the interface.
Common Use Cases for Border Radius Generator
Card & Component Design
UI designers use the border radius generator to style card components, modal dialogs, tooltips, and dropdown menus. The visual preview makes it easy to find the perfect corner radius that matches the design system - from subtle 4px to generous 16px rounding.
Design-to-Code Handoff
Designers use the border radius generator to extract exact CSS values from visual mockups and hand them off to developers. No more pixel-measuring or guessing - copy the exact border-radius CSS declaration and paste it into the codebase.
Image & Avatar Styling
Web developers use the border radius generator to style profile avatars (circular at 50%), product images (rounded at 8-12px), and thumbnail galleries. The % unit mode creates perfect elliptical and circular shapes for images of any aspect ratio.
Mobile App UI Design
Mobile developers use the border radius generator to style button shapes, card edges, and bottom sheet headers. The per-corner control enables asymmetric shapes that follow modern mobile UI patterns like the iOS-style squircle app icon.
CSS Learning & Experimentation
Frontend developers learning CSS use the border radius generator to understand how border-radius works visually. The live preview and per-corner controls make it easy to see how each value affects the final shape - a perfect CSS learning tool.
Button & Form Element Styling
UX developers use the border radius generator to style buttons, input fields, search bars, and form controls. Matching the border-radius across related form elements creates visual consistency and a polished user experience.
Understanding CSS Border Radius
What is CSS Border Radius?
The CSS border-radiusproperty rounds the corners of an element's outer border edge. You can set a single radius for all four corners (using a single value like border-radius: 8px), two values for diagonal pairs (8px 16px), or four values for each corner individually (8px 4px 8px 4px). The order is top-left, top-right, bottom-right, bottom-left - clockwise starting from the top. Our border radius generator handles all these formats and outputs clean, production-ready CSS.
How Our Border Radius Generator Works
- Choose your input mode: Use Uniform mode to control all four corners with a single slider - perfect for consistent rounding. Switch to Per Corner mode to set each corner independently using individual number inputs arranged in a 2×2 grid that mirrors the element layout.
- Adjust the values and unit: Drag the slider or type values directly. Switch between px (pixels for fixed-size rounding) and % (percentage for elliptical/circular shapes). The live preview updates instantly, showing the exact corner radius values overlaid on the preview box.
- Copy the CSS:Click “Copy CSS” to copy the production-ready CSS declaration to your clipboard. The generator outputs the optimal shorthand format - using a single value, two values, or four values depending on your corner configuration.
PX vs % - Which Unit to Use
- px (Pixels): Fixed-size rounding that does not change when the element is resized. Use px for standard UI components like buttons, cards, and modals where you want consistent corner rounding regardless of the element size. Values typically range from 2px (subtle) to 24px (very rounded).
- % (Percentage): Relative rounding that scales with the element size. Use 50% to create a perfect circle or pill shape. Use lower percentages for elliptical rounding that adapts to different element dimensions. Percentage values are capped at 50% for circular shapes.
Border Radius in Modern CSS
The border-radius property is supported in all modern browsers without any vendor prefixes. It also supports theborder-start-start-radius, logical property variants for RTL and vertical writing mode support. For circular elements, use 50%; for pill-shaped buttons, use a value larger than the element height (e.g., 9999px) which clamps to the maximum possible radius.
Related CSS Generators
Box Shadow Generator
Interactive CSS box-shadow builder with X/Y offset, blur, spread, color, and inset mode. Multiple shadow layers supported.
Border Generator
CSS border builder with width, style, color, and per-side controls. Also supports border-image for advanced frame effects.
CSS Filter Generator
Interactive CSS filter builder. Adjust blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, and sepia.
CSS Gradient Generator
Build linear, radial, and conic gradients visually with up to 10 colour stops. Live preview with instant CSS output.
Frequently Asked Questions About Border Radius Generator
A border radius generator is a visual tool that creates CSS border-radius code by letting you adjust corner rounding values and seeing the result live. Our border radius generator supports both uniform mode (single slider for all corners) and per-corner mode (independent values for each corner) with px and % units. The generated CSS uses the optimal shorthand format and can be copied with one click.
To make a perfect circle, set all four corners to 50% when using the % unit, or to a value larger than half the element size (e.g., 9999px) when using px. The browser clamps the radius to the maximum possible value, which is half the elements smaller dimension. For a square element, 50% creates an exact circle. For a rectangular element, 50% creates an ellipse.
Uniform mode applies the same radius value to all four corners using a single slider - perfect for consistent, symmetrical rounding. Per-corner mode lets you set each corner independently using individual inputs arranged in a 2×2 grid that matches the element's visual layout (top-left, top-right, bottom-right, bottom-left). This enables asymmetric shapes like convex or concave edges.
Yes. All border radius generation happens 100% client-side in your browser. Your design choices are never sent to any server, never stored, and never transmitted anywhere. The border radius generator is completely private and safe for client projects.
Yes. The border radius generator is 100% free with no signup required, no premium features, and no usage limits. Generate unlimited border radius styles without any restrictions or hidden costs.
Pixels (px) create fixed-size rounding that does not change when the element is resized - ideal for buttons, cards, and modals where consistent corner rounding is needed. Percentages (%) create relative rounding that scales with the element size - 50% creates a perfect ellipse or circle. For most UI components, px is the standard choice.
Yes. By setting different values for each corner in per-corner mode, you can create asymmetric shapes such as a top-left-only rounded corner (scoop shape) or diagonal rounding patterns. This is useful for unique UI elements like speech bubbles, product badges, and decorative panels.
When you set border-radius to a very large value like 9999px, the browser clamps the radius to half the element's smallest dimension, effectively creating a pill or capsule shape. This is commonly used for tag badges, pill buttons, and progress bars. Our border radius generator includes this as a preset.