What is border-radius property in CSS?

The border-radius property is used to round corners of elements.

Syntax

The border-radius property can have one to four values. These values can be in:

  • pixels
  • percentage
  • em
  • CSS (SCSS)
Values in px and Percentage
  • CSS (SCSS)
Values in em(em is relative to font size)

Making elliptical shapes

Border-radius is also used to make elliptical shapes by specifying the horizontal and vertical radii of elements.

It is done by using '/' between two values.

The value is set to initial to get the default value of the property.

  • CSS (SCSS)
Examples using ' / '