What is the Border Radius Generator?

This tool can generate the CSS property border-radius.

The intuitive operation with a preview box that changes in real time and a slider makes it easy to generate the border-radius of your choice.
It can be generated in two ways: a simple border-radius and a more advanced form of border-radius.

How to use the Border Radius Generator

You can choose between 「simple」 and 「advanced」 methods of generating border-radius, which can generate more advanced shapes.

Simple generation

The slider can be used to adjust the border-radius value to be applied to the four corners of the box.

Advanced generation

The slider can be used to adjust the border-radius value in the same way as Simple, but it generates a more complex border-radius shape.
If it is difficult to adjust intuitively with a slider, the four vertices (○) attached to the preview box can be manipulated directly.

About border-radius

To learn more about border-radius, please refer to the MDN Web Docs.
border-radius - CSS: Cascading Style Sheets | MDN