CSS Border

The border-radius property allows you to change the shape of the basic box model

Every corner of an element can have up to two values, for the vertical and horizontal radius of that corner (for a maximum of 8 values).

Border-radius is most commonly used to convert box elements into circles. By setting the border-radius to half of the length of a square element, a circular element is created:

border-radius: 10px;

Because border-radius accepts percentages, it is common to use 50% to avoid manually calculating the border radius value:

.circle {
width: 150px;
height: 150px;
border-radius: 50%;
}

If the width and height properties are not equal, the resulting shape will be an oval rather than a circle.