<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed lead">The component that animates the CSS properties that control the radius of the corners of a target element.</p>
</div>
<divclass="featurettes dark">
<divclass="content-wrap">
2020-06-09 22:22:33 +02:00
<divclass="columns">
2020-06-09 22:08:43 +02:00
<divclass="col3">
<h3class="border text-right">Overview</h3>
<pclass="condensed text-right">Animate the radius for all corners or a specific one for a target element.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Border Radius</b> component provides support for the CSS3 <b>border-radius</b> property and all corner variations.</p>
<p>The component accepts any measurement unit but the best results in terms of visual presentation are when you use <b>%</b>, <b>em</b> or any other
subpixel units.</p>
<p>Even if you don't provide any unit at all, the component will work it out with <b>px</b>.</p>
<p>For a quick reference, here are the properties supported:</p>
</div>
</div>
</div>
</div>
<divclass="content-wrap">
<h3>Border Radius Properties</h3>
<ul>
<li><kbdclass="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbdclass="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
<li><kbdclass="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
<li><kbdclass="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
<li><kbdclass="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
</ul>
<h3>Examples</h3>
<p>OK let's have a look at some sample tween objects and a quick demo:</p>