Border Radius Generator

How to use

• Select the border-radius value either in percentage or pixels. If you select percentage, the radius will look uniform with every width and height.
• If you want symmetrical border radius for all four corners, just slide 'Top-Left Horizontal' slider to generate the desired border radius.
• You can create oval by making radius equal to 50%. For circles, you just need to keep width and height values of the html element same.
• Here, you have the flexibility to define separate horizontal and vertical radii for all four corners.
• If you want to have same vertical radius for all four corners, slide 'Top-Left Vertical' slider to select the desired border radius.
• You can create amazing shapes with unsymmetrical border radius. Experiment with all sliders to find the possibility to create great shapes.
• It is not necessary to use vendor prefixes like -moz-border-radius or -webkit-border-radius. All modern browsers support border-radius property without vendor prefix now. However, for better compatibility with older browsers, you may like to still use it.