Border Options
2px
Preview Area
Display Units in :   
   
Border Radius Options
5px
5px
5px
5px
5px
5px
5px
5px
5px
5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
5px / 5px
CSS Code

What is Online CSS Border Radius Generator?

CSS Border Radius Generator is a free online tool for generating CSS border radius. "border-radius" is one of the most used CSS properties to soften corners of HTML boxes. If you use equal border-radius on all corners, it is relatively easy to apply, and you don't need any helper tool to set it. Even most developers don't know, CSS border radius may take arguments up to 8, 2 for each corner and each one determines slope of each axis of the corner. By setting all these 8 parameters, you can use CSS border-radius property in a more professional way to mask colors, images, and html elements.

You can either use standard CSS units like pixel (px), rem, em or percentages for border-radius. Percentages will be used in this tool to represent a more general solution, but you can convert them to standard units by your own if you prefer.

Here is a representation of an advanced usage of border-radius for masking an image. By settings border-radius of each corner individually, it is possible to obtain artistic results with images, gradients, or event with solid colors.


Advanced usage of CSS border-radius

There are 2 main options for settings radius of each border. By default, there are 8 dots to set, 2 for each corner. If you enable "Merge Edge Radiuses" option, number of dots will reduce to 4 and each dot will control 2 radii at the same time. This option is better for setting more curvy shapes.

How to use Online CSS Border Radius Generator?

You can generate CSS code for border-radius property by following these steps.

  1. Set the positions of each dot by dragging them to desired positions.
  2. There are 3 preview types. Solid color, gradient, or image. You can preview border-radius in each mode, either with guides or by hiding them with "Hide Guides" option to see result.
  3. Width and height of the image can be set if you need.
  4. If you want to merge edge radiuses, you can enable this option to control 2 neighbor radiuses with one dot.
  5. If you get the desired result in preview, you can copy the CSS code by clicking "Copy" button and paste it in your project's styles directly.