CSS Border Radius Generator

CSS Border Radius Generator

Solid Color
Preview Type
Width: 400px
    Height: 400px
      10015 Tools
      +

      Get “Online Tools” browser extension!

      Access all tools powered by 10015.io with just one click

      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 corder. 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
      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 radius 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 final 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 neighbour 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 you project's styles directly.