Border Patterns

Borders are defined with the border property. This demonstration cycles through a few configurations. Border property values cannot be tweened with an animation, but changes can be timed with the delay property.

story = {
  item: {
    text:"border",
    init: { 
        padding:5, corners:15, font:50, color:"#234"
    },
    actions:[
      { delay:1, 
        border:{size:0.1,color:"#678",style:"dashed"}
      },
      { delay:1,
        border:{size:1,color:"#456",style:"dotted"}
      },
      { delay:1,
        border:{size:3,color:"#234",style:"solid"}
      },
      { delay:1, border:false}
    ]
  }
};