Rounded corners generator (border-radius)
Adjust each corner's radius independently and get the CSS border-radius code with a preview.
Processed on your device. Nothing is sent to any server.
border-radius: 24px 24px 24px 24px;Adjust each corner's radius independently and get the CSS border-radius code with a live preview.
Generates the shorthand border-radius syntax with the four values in top-left, top-right, bottom-right, bottom-left order.
Use cases
- Creating a card with asymmetric corners.
- Designing a teardrop or chat-bubble shape.
- Visually fine-tuning a button's rounding.
How it works
- 1
Adjust each corner
Enter the radius in pixels for each of the four corners.
- 2
Copy the CSS
Copy the border-radius property ready to paste.
Frequently asked questions
- Can I set a different radius per corner?
- Yes, each of the four corners is controlled independently.
Related tools
- Box Shadow GeneratorCreates CSS shadows with a live preview.
- CSS Gradient GeneratorCreates CSS gradients with preview.
- Color PickerPick a color and get HEX, RGB and HSL.
- Palette GeneratorGenerates harmonious palettes from a base color.
- Random Color GeneratorGenerates a random HEX color.
- WCAG Contrast CheckerChecks WCAG contrast between two colors.