Online Border-Radius Generator

Enter a PX, REM, EM, or percentage value in the field below to modify the border radius of the box provided. Then copy and paste the CSS provided into the CSS of your project.

CSS Border-Radius Information

• The border-radius adds rounded corners to an element within an HTML document.
• The border-radius property can be attributed to all four corners at the same time or individual corners.
• Referencing border-radius with one value will default all four corners to the element’s border-radius.

Rules for Individual Corners

• • If four values of border-radius are used, the first is top-left, second top-right, third bottom-left, and fourth bottom-right.

ex: border-radius: 10px 40px 120px 0px;

• • Three values used for border-radius applies to top-left, top-right and bottom-left, while the final value applies to bottom-right.

ex: border-radius: 20px 80px 0px;

• • Two values apply to the top and bottom.