CSS Border Radius Generator
Generate CSS border-radius visually with individual corner sliders, preset shapes, unit toggle (px, %, rem), and copy-ready CSS output. Free online border-radius generator.
Why Use a CSS Border Radius Generator?
Border radius is one of the most commonly used CSS properties for creating rounded corners, yet crafting the perfect shape with different values for each corner can be tedious. A visual generator lets you see the result in real time while adjusting each corner independently, applying presets for common shapes, and switching between units — all without writing CSS by hand.
Key Features
- Visual preview box with adjustable border-radius for each corner
- 4 individual corner sliders + Link All Corners toggle for uniform radius
- 8 preset shapes: Pill, Circle, Rounded, Blob, Leaf, Morph, Tab, Card
- Copy CSS output as shorthand or individual properties
- Unit toggle (px, %, rem) and randomize button for creative shapes
How It Works
- Choose a preset or adjust individual corner sliders
- Toggle Link All to set all corners to the same value simultaneously
- Switch between px, %, and rem units to match your project
- Copy the generated CSS code as shorthand or individual properties
Technical Details
This generator outputs standard CSS border-radius property syntax. The shorthand follows the clockwise order: top-left, top-right, bottom-right, bottom-left. When all corners are equal, a single value is used. When two diagonal pairs match, two values are used. The tool supports px (pixels), % (percentage of element dimensions), and rem (root em) units. All processing is 100% client-side.
Frequently Asked Questions
What is the difference between shorthand and individual CSS properties?
The shorthand 'border-radius' combines all four corners into one declaration, following the CSS clockwise order (top-left, top-right, bottom-right, bottom-left). Individual properties like 'border-top-left-radius' let you target specific corners. The shorthand is more concise, while individual properties offer more control in complex stylesheets.
When should I use percentage vs pixel units for border-radius?
Percentage values create elliptical corners relative to the element's dimensions, making them responsive. Pixels give fixed-size corners regardless of element size. Use percentages for fluid shapes like circles (50%) and blobs, and pixels for consistent corner sizes across different-sized elements.
How do I create a circle with border-radius?
Set all corners to 50% to create a perfect circle on a square element, or use the 'Circle' preset. The 50% value makes the radius equal to half the element's width/height, forming a complete circle.
Related tools
Color Picker & Converter
Pick colors and convert between HEX, RGB, HSL, and HSV formats
HEX to RGB Converter
Convert HEX color codes to RGB and RGBA values
RGB to HEX Converter
Convert RGB color values to HEX codes
Color Palette Generator
Generate color palettes from a base color — complementary, analogous, triadic, and more
WCAG Contrast Checker
Check color contrast ratios for WCAG AA and AAA accessibility compliance
Hash Color Generator
Generate consistent, deterministic colors from any text string