## Border Radius

The component that animates the CSS properties that control the radius of the corners of a target element.

### Overview

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 Properties

- `borderRadius` allows you to animate the `border-radius` on all corners for a given element.
- `borderTopLeftRadius` allows you to animate the `border-top-left-radius` for a given element.
- `borderTopRightRadius` allows you to animate the `border-top-right-radius` for a given element.
- `borderBottomLeftRadius` allows you to animate the `border-bottom-left-radius`for a given element.
- `borderBottomRightRadius` allows you to animate the `border-bottom-right-radius`for a given element.

### Examples

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();

ALL
TL
TR
BL
BR
Start

### Notes

- A quick reminder here is that the component does not support radius shorthand values, EG `border-radius: 50px 20px`.
- The component does not use vendor property preffixes anymore, the major browsers don't need for quite some time now. If you want to support legacy browsers, you still have the utilities available.
- Early implementations from any browser that have been deprecated are also not supported.
- This component is bundled with demo/src/kute-extra.js file.