Border Radius - Multiple Values

The border-radius property can take one, two, three or four values. If this property has a single value, as seen in the previous lesson, it applies to all four corners.

If this property has two values:

  • The first value is for the top-left and right-bottom.
  • The second value is for top-right and left-bottom

If this property has three values:

  • The first value is for the top-left corner.
  • The second value is for top-right and left-bottom.
  • The third value is for the bottom-right corner.

If this property has four values:

  • The first value is for the top-left corner.
  • The second value is for the top-right corner.
  • The third value is for the bottom-right corner.
  • The fourth value is for the bottom-left corner.the

Values get assigned in the clockwise direction starting from top-left.