Border Radius Generator
The Online CSS Border Radius Generator is a free tool that lets you generate CSS border radius by adjusting each corner individually using draggable dots.
Advanced Border-Radius CSS Generator
What is Online CSS Border Radius Generator?
The CSS Border Radius Generator is a free online tool that makes it easy to generate the border-radius property for your website. It’s one of the most commonly used CSS properties to soften the corners of HTML boxes. While you can apply an equal border-radius on all corners easily, this tool offers more flexibility. It allows you to set 8 parameters (2 for each corner) to control the slope and axis of each corner individually. This makes the border-radius property more professional, enabling you to mask colors, images, and other HTML elements effectively.
You can use standard CSS units like pixels (px), rem, em, or percentages, with percentages being the default for a more general solution. If you prefer, you can convert them to any unit you choose. For advanced usage, the tool lets you adjust the border-radius to create artistic results with images, gradients, or even solid colors. The tool has 2 main options: one with 8 dots to set each corner, and another with the “Merge Edge Radiuses” option that reduces the number of dots to 4 for more curvy shapes. This feature allows you to fine-tune your design quickly and easily.
How to Use the Online CSS Border Radius Generator?
To generate CSS code for the border-radius property, simply follow a few easy steps. First, drag each dot to your desired positions to adjust the border-radius. You can choose from 3 preview types: solid color, gradient, or image. This allows you to see how your border-radius will look in each mode. If you prefer, you can hide the guides by using the “Hide Guides” option to view the result clearly. You can also set the width and height of the image to fit your design needs.
If you want to merge the edge radiuses, just enable this option to control the neighbor radiuses with a single dot. Once you’re happy with the preview, you can simply click the “Copy” button to copy the CSS code and paste it directly into your project’s styles.