Understanding the CSS border-radius Property
The CSS border-radius property defines how the corners of an element's boundary are rounded. By applying this property, you can transition from sharp, rectangular edges to softer, curved profiles. The Border Radius Generator provides a visual interface to manipulate these curves in real time, automatically writing the corresponding CSS code for your stylesheets.
The tool maps its controls clockwise, starting from the top-left corner and moving to the top-right, bottom-right, and bottom-left corners. The initial state of the generator starts with a slider value of 24, which outputs:
border-radius: 24px;
This single-value declaration applies an equal curve to all four corners of the element.
Pixel vs. Percentage Units in Corner Rounding
Choosing the correct unit of measurement changes how the rounded corners behave when the parent element changes size. The generator allows you to toggle the "Unit" selector between "px" (pixels) and "%" (percent) to suit different design requirements.
- Pixel Units (px): When using pixels, the corner is rounded by a fixed, absolute physical distance. The radius of the curve remains constant regardless of whether the box is small or large.
- Percentage Units (%): When using percentages, the rounding is calculated relative to the dimensions of the box itself. The horizontal radius of the corner curve scales with the width of the element, while the vertical radius scales with the height of the element. This relative scaling is highly useful for responsive design, where elements must maintain their proportional shapes across varying screen sizes.
Creating Basic Curves, Circles, and Pill Shapes
For standard layouts, you can control the roundness of your box using symmetrical, quarter-circle corners. When the "Elliptical corners" toggle is turned off, each corner is defined by a single radius.
┌────────────────────────┐
│ Quarter-Circle Corner │
│ r_x = r_y │
│ (Single Radius) │
└────────────────────────┘
You can configure these shapes using specific techniques or the built-in presets:
- Perfect Circles: To transform a square element into a perfect circle, enable "Link all corners", set the unit selector to "%", and drag the slider to 50%. Alternatively, clicking the "Circle" preset instantly configures all corners to 50%.
- Pill-Shaped Buttons: To design a pill shape that retains its fully rounded sides at any width, set the unit selector to "px". Drag the corner slider to a value that exceeds half of the element's total height. The browser caps the curve to prevent overlapping, keeping the sides perfectly semi-circular even if the button stretches horizontally.
- Standard Presets: The tool includes quick-start buttons to instantly apply common configurations:
- "Sharp": Resets all corner radii to 0.
- "Rounded": Applies a standard, subtle corner curve.
- "Circle": Sets all corners to 50%.
- "Blob": Configures asymmetrical values for organic shapes.
- "Leaf": Creates diagonal symmetry by rounding opposing corners while leaving the others sharp.
Advanced Styling with Elliptical Mode
Enabling the "Elliptical corners" toggle unlocks advanced shaping capabilities. In standard mode, every corner is a quarter-circle with equal horizontal and vertical radii. In elliptical mode, each corner is split into separate "Horizontal" and "Vertical" sliders, allowing you to define independent values for each axis.
┌────────────────────────┐
│ Elliptical Corner │
│ r_x ≠ r_y │
│ (Separate Radii) │
└────────────────────────┘
This separation allows you to create soft, organic, and asymmetrical "blob" shapes. When elliptical mode is active, the generator writes the CSS using the two-value slash syntax. The values before the slash represent the horizontal radii, while the values after the slash represent the vertical radii. If you disable elliptical mode, the tool drops back to the simplified single-value short form.
How to Apply the Generated CSS
Once you have adjusted the sliders to achieve your desired shape, the tool displays the compiled code under the "CSS" heading.
To use this code in your project:
- Click the "Copy CSS" button to copy the declaration to your clipboard.
- Open your project's stylesheet.
- Paste the declaration into the CSS rule targeting your HTML element.
For example, a custom organic shape generated by the tool might look like this when pasted into your stylesheet:
.custom-box {
border-radius: 70% 30% 50% 50% / 30% 60% 40% 70%;
}
Local Browser Processing and Privacy
The Border Radius Generator processes all calculations locally. Every corner adjustment, unit conversion, and CSS string generation is drawn right in your browser. No data, dimensions, or configuration settings are uploaded to BroBroGo.
Frequently Asked Questions
How do the four corners and px vs % work? The four sliders map, clockwise, to the top-left, top-right, bottom-right and bottom-left corners. In pixels a corner rounds by a fixed amount; in percent it rounds relative to the box — a horizontal percent follows the width and a vertical percent follows the height, so 50% turns a square into a circle.
What does elliptical mode do? Off, every corner is a quarter-circle with a single radius. Turn it on and each corner gets a separate horizontal and vertical radius, which is how you build soft, organic “blob” shapes. The generator writes the two-value slash form for you and drops back to the short form once the corners are round again.
How do I make a perfect circle or a pill? Link the corners, switch to percent and set 50%: a square becomes a circle. For a pill-shaped button, keep pixels instead and drag a corner past half the button’s height — the sides stay fully rounded at any width. The Circle preset sets the first case up in one click.