CSS Border Radius Generator

What is CSS Border Radius?

The CSS border-radius property rounds the corners of an element. You can set a single value to round all corners equally, or set individual values for each corner to create asymmetric shapes. It works on any HTML element including divs, buttons, images and inputs.

Border Radius Syntax

/* All corners equal */
border-radius: 8px;

/* Top-left, top-right, bottom-right, bottom-left */
border-radius: 8px 16px 8px 16px;

How to Make a Circle

Set border-radius to 50% on an element with equal width and height. This creates a perfect circle from any square element.

width: 100px;
height: 100px;
border-radius: 50%;

Common Border Radius Values

      /* Subtle rounding */

      border-radius: 4px;

      /* Standard card */

      border-radius: 8px;

      /* Rounded button */

      border-radius: 12px;

      /* Pill shape */

      border-radius: 9999px;

      /* Perfect circle */

      border-radius: 50%;