CSS rounding corners

This lesson will help you understand how to round the corner of the element using border-radius property and its different versions.

Quick Hands-on

Points to Remember

• CSS “border-radius” property helps to create a rounding effect of the element.

• The “border-radius” property can have following four values:
  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

• The “border-radius” property is shorthand for all the above four values.

• When we specify the “border-radius” of 20px then it actually means the radius of the imaginary circle present at the corner of the element (see the image).

• The example of “border-radius” is:
  • border-radius: 10px 20px 30px 40px;
  • That is 10px border radius from top-left corner, 20px border-radius from top-right corner, 30px border radius from bottom-right and 40px border radius from bottom-left of the element.

• We can specify the “border-radius” in percentage(%) as well.

• To make the “border-radius” of element as circular, you need to specify its value as “50%” like “border-radius: 50%;”.