CSS Border Radius Generator
The CSS Border Radius Generator creates rounded corners for HTML elements. Border radius is one of the most commonly used CSS properties for modern UI design. This generator lets you set individual radius for each corner, create elliptical corners, and generate complex shapes. It provides a visual preview and generates ready-to-use CSS code. Perfect for creating cards, buttons, and containers with custom corner shapes.
Formula
Border radius syntax: border-radius: top-left top-right bottom-right bottom-left; Elliptical corners: border-radius: horizontal / vertical; Percentage values create circular or elliptical shapes 50% creates a perfect circle (for square elements)
Example
All corners equal: border-radius: 8px; Individual corners: border-radius: 10px 5px 10px 5px; Circular element: border-radius: 50%; Elliptical corners: border-radius: 50% / 25%;
How to Use
- Set radius for all corners or individual corners
- Optionally set elliptical corners with horizontal/vertical values
- Preview the rounded element in real time
- Copy the generated CSS code
- Apply to your HTML elements
Frequently Asked Questions
What is border radius?
Border radius rounds the corners of an element. The value defines the radius of the rounding. Higher values create more rounded corners. 50% on a square element creates a circle. Border radius works on any element with a background or border.
How do I create a circle with CSS?
Set border-radius: 50% on a square element (equal width and height). This creates a perfect circle. For an ellipse, use border-radius: 50% on a rectangular element.
Can I set different radius for each corner?
Yes. Use border-radius: top-left top-right bottom-right bottom-left. For example, border-radius: 10px 5px 15px 0 creates different rounding for each corner. You can also use border-top-left-radius, etc.
What are elliptical corners?
Elliptical corners use different horizontal and vertical radii. The syntax is border-radius: horizontal / vertical. For example, border-radius: 50px / 25px creates corners that are wider than they are tall.
Does border radius affect layout?
No. Border radius only affects the visual appearance, not the layout. The element's box model (width, height, padding, margin) remains the same. Content outside the rounded corners is clipped if overflow is hidden.