The corners property is used to create rounded corners. When a number is given, it represents the radius of the circle as a percentage of the height of the container (page).
This example animates between five different configurations over 10 seconds.
- The first configuration sets all four corners to 15% of the page height.
- The second one sets all four differently. The first number corresponds to the top-left corner, then the top-right, bottom-right and then bottom-left.
- The third one changes just the bottom-right, keeping the other corners as they were.
- The forth one uses the array format. When two numbers are given in an array, all four corners are set alternating with the two values.
- The fifth one uses the boolean format. Setting the value to false resets all four corners to 0.