Developer ToolsBorder Radius Generator
Visually create complex CSS border-radius shapes with independent corner controls. Preview live and copy ready-to-use CSS code instantly.
Corner Settings
Unit:
Preview & CSS Code
border-radius: 8px
Shorthand
.element {
border-radius: 8px;
}Longhand
.element {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}Related Tools
About Border Radius Generator
How It Works
- Adjust each corner using the sliders or number inputs
- Toggle 'Link All Corners' to control all four corners simultaneously
- Select a unit (px or %) depending on whether you want fixed or relative sizing
- Use presets to instantly apply common shapes like circle, pill, or square
- Customize the preview background and element color for a realistic view
- Copy the generated CSS shorthand or longhand code with one click
Common Use Cases
- Designing buttons, cards, and input fields with rounded corners
- Creating pill-shaped tags and badges in UI design
- Building circle avatars and icons with 50% border-radius
- Generating unique asymmetric shapes for creative layouts
- Prototyping UI components with precise corner control
- Learning and experimenting with CSS border-radius values
Frequently Asked Questions
What is CSS border-radius?
CSS border-radius is a property that rounds the corners of an element's border box. It accepts one to four values that define the radii of the top-left, top-right, bottom-right, and bottom-left corners.
How do I use the Border Radius Generator?
Use the sliders or number inputs to adjust each corner independently. The live preview updates instantly, and you can copy the generated CSS code with one click.
Can I set each corner to a different value?
Yes. Toggle off the 'Link All Corners' option to control each corner (top-left, top-right, bottom-right, bottom-left) independently for asymmetric shapes.
What is the difference between the shorthand and longhand CSS?
The shorthand border-radius property sets all four corners at once. The longhand properties (border-top-left-radius, border-top-right-radius, etc.) set each corner individually, which is useful for overriding specific corners.
How do I make a circle with CSS border-radius?
Set border-radius to 50% on a square element. Use the 'Circle' preset in this tool to apply it instantly and see the result in the live preview.
How do I make a pill/capsule shape?
Set border-radius to a very large value (e.g., 9999px) to create a pill shape. Use the 'Pill' preset to apply it with one click.
Does border-radius support percentage values?
Yes. Percentage values are relative to the element's dimensions — 50% creates a circular shape on a square element. This tool supports both pixel (px) and percentage (%) units.
What are the two-value border-radius shorthand values?
When using the shorthand with two values, the first applies to top-left and bottom-right corners, and the second applies to top-right and bottom-left. This tool generates optimized shorthand when opposite corners match.
Is the generated CSS compatible with all browsers?
Yes. The border-radius property is supported in all modern browsers and Internet Explorer 9+. The tool also generates the -webkit- prefix for older Safari compatibility.
Can I preview the shape with a background color?
Yes. The live preview displays the shape with a customizable background color so you can see exactly how the rounded corners will look in your design.
How do I reset to default values?
Click the 'Reset' button to restore all corners to 8px, which is the default rounded corner value used in most UI frameworks.
What presets are available?
This tool includes presets for common shapes: Square (0px), Slight (4px), Rounded (8px), Extra Rounded (16px), Pill (9999px), and Circle (50%). Each can be applied with one click.