Quick Start
Open HeronTool's Border Radius tool. In the left panel, you'll find four input fields for top-left, top-right, bottom-right, and bottom-left corners. Enter pixel values (e.g., 10px) or percentages (e.g., 20%), and the preview updates in real time. For uniform corners, click the 'Sync' button—set one value, and the rest follow automatically.
Advanced Tips
- Individual Control: Deselect 'Sync' to assign different radii per corner, creating unique shapes (e.g., pill buttons, chat bubbles).
- Preset Styles: The tool offers presets like 'Soft', 'Circle', and 'Square'—one-click apply for common card, button, or image styles.
- Copy Code: Once satisfied, click 'Copy CSS'. The code includes
-webkit-prefixes for full browser compatibility—paste directly into your stylesheet.
FAQ
Q: How do I apply rounded corners to an image?
A: Generate the style in the tool, then add the border-radius property to the image's CSS class—no need to crop the image itself.
Q: What's the difference between percentages and pixels?
A: Percentages scale with element size, ideal for responsive layouts; pixels remain fixed, best for fixed-size elements.
Q: Why does my preview differ from the actual result?
A: Check if overflow: hidden is set—otherwise, child elements may overflow the rounded boundary. The tool includes a container option to simulate real conditions.
