The component that animates the CSS properties that control the radius of the corners of a target element.
Animate the radius for all corners or a specific one for a target element.
The KUTE.js Border Radius component provides support for the CSS3 border-radius property and all corner variations.
The component accepts any measurement unit but the best results in terms of visual presentation are when you use %, em or any other subpixel units.
Even if you don't provide any unit at all, the component will work it out with px.
For a quick reference, here are the properties supported:
border-radius on all corners for a given element.border-top-left-radius for a given element.border-top-right-radius for a given element.border-bottom-left-radiusfor a given element.border-bottom-right-radiusfor a given element.OK let's have a look at some sample tween objects and a quick demo:
KUTE.to('selector1',{borderRadius:'100%'}).start();
KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
KUTE.to('selector3',{borderTopRightRadius:'5em'}).start();
KUTE.to('selector4',{borderBottomLeftRadius:50}).start();
KUTE.to('selector5',{borderBottomRightRadius:'20px'}).start();
border-radius: 50px 20px.