Corners

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.

  1. The first configuration sets all four corners to 15% of the page height.
  2. 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.
  3. The third one changes just the bottom-right, keeping the other corners as they were.
  4. 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.
  5. The fifth one uses the boolean format. Setting the value to false resets all four corners to 0.
story = {
  item: {
    text:"corners",
    init: {
      padding:5,
      border:[1, "#567"],
      font:40,
      color:"#567"
    },
    actions:[
      { anim:2, corners:15},
      { anim:2, corners:[40,10,30,5]},
      { anim:2, corners:{bottomRight:5}},
      { anim:2, corners:[10,40]},
      { anim:2, corners:false}
    ]
  }
};