Border Radius Generator
Set border-radius for each of the 4 corners independently with live preview box.
The Border Radius Generator lets you set the radius for each of the four corners independently with a live preview box. Copy the ready-made CSS straight into your project once you are happy with the shape.
What is a Border Radius Generator?
A Border Radius Generator is a web-based tool that helps developers and designers create CSS border-radius properties efficiently. It allows you to specify different radius values for each of the four corners of an element: top-left, top-right, bottom-right, and bottom-left. The generator provides a live preview of how these values affect the element's appearance, making it easy to achieve the exact visual style you want. This tool is particularly useful when working with modern web designs that require custom rounded corners for cards, buttons, containers, and other UI elements. Each of the four corners can be set on its own, or a single value can be applied to all of them at once for a uniform look.
The border-radius property in CSS is used to round the corners of an element's outer border. It accepts values in pixels, percentages, or a combination of both. When specifying individual corner radii, CSS uses a specific syntax where values are applied in clockwise order starting from the top-left corner. This generator simplifies the process by allowing you to adjust each corner independently and see the results immediately. The tool also provides a copyable CSS snippet that you can directly paste into your stylesheet or inline style attribute, saving time and reducing the chance of syntax errors. This is especially helpful when you need to create elliptical corners using the slash syntax, where horizontal and vertical radii differ.
The entire tool runs inside your browser, so the radius values you set and the CSS you copy never leave your device or get stored on any server. There is no account to create and no file to upload, which means you can experiment with each of the four corners as freely as you like without any concern for privacy. The output is standard border-radius syntax that drops directly into any stylesheet, and because it is computed instantly you can change a value and see the rounded box update in the very same moment.
How to use this Border Radius Generator
- Set the border width and choose a border color for the preview box.
- Select a background color that matches your design.
- Enter a value in the All Corners field to apply the same radius to all corners simultaneously.
- Adjust each corner individually using the Top-Left, Top-Right, Bottom-Right, and Bottom-Left inputs.
- Click the CSS result area to copy the complete border-radius property code.
- Click the preview box to copy just the border-radius value for easy integration.
FAQ
What is CSS border-radius?
CSS border-radius rounds the corners of an element's outer border. You can specify different radius values for each of the four corners: top-left, top-right, bottom-right, and bottom-left.
Can I use percentage values?
Yes, border-radius accepts both pixel values and percentages. Percentages are relative to the corresponding dimension of the element (width for horizontal radii, height for vertical radii).
What is the syntax for different corner radii?
The syntax is border-radius: top-left top-right bottom-right bottom-left:. If fewer values are provided, CSS applies them in a specific pattern: one value applies to all corners.
How do elliptical corners work?
Elliptical corners use a forward slash: border-radius: top-left/horizontal vertical. The values before the slash are horizontal radii, and after are vertical radii, creating elliptical rather than circular corners.