{"id":152,"date":"2006-08-10T23:38:03","date_gmt":"2006-08-11T04:38:03","guid":{"rendered":"http:\/\/www.juixe.com\/techknow\/index.php\/2006\/08\/10\/rounded-corners-with-rico\/"},"modified":"2012-07-04T17:45:54","modified_gmt":"2012-07-05T00:45:54","slug":"rounded-corners-with-rico","status":"publish","type":"post","link":"http:\/\/juixe.com\/techknow\/index.php\/2006\/08\/10\/rounded-corners-with-rico\/","title":{"rendered":"Rounded Corners With Rico"},"content":{"rendered":"<p>I&#8217;ve seen and tried a ton of HTML\/CSS\/JavaScript tricks and hacks to get rounded corners on DIV elements.  So far I have found that the easiest way to get rounded corners on divs is by using the <a href=\"http:\/\/openrico.org\/\">Rico<\/a> JavaScript framework.  To demonstrate this in code let me define a snippet of HTML:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;DIV id=&quot;mydiv&quot; style=&quot;background-color: #FFE6BF&quot;&gt;\r\n  some text\r\n&lt;\/DIV&gt;\r\n<\/pre>\n<p>To make the DIV element have rounded corners just execute the following bit of JavaScript, perhaps in the document.onload event method:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nRico.Corner.round('mydiv');\r\n<\/pre>\n<p>You can also pass in some additional options to Rico&#8217;s round function which indicates which corner(s) to round.  Here is another example which rounds only the top-right and bottom-left corners:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nRico.Corner.round('mydiv', {corners:'tr bl'});\r\n<\/pre>\n<p>And of course, br and tl also work.<\/p>\n<p>As a convenience, you can round the corners of multiple elements at once.  To round all DIV elements that use a given class use the following JavaScript:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nnew Rico.Effect.Round('div', 'roundCssClass');\r\n<\/pre>\n<p>With the above JavaScript, only those DIV element that use the CSS class roundCssClass will be rounded off.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve seen and tried a ton of HTML\/CSS\/JavaScript tricks and hacks to get rounded corners on DIV elements. So far I have found that the easiest way to get rounded corners on divs is by using the Rico JavaScript framework. To demonstrate this in code let me define a snippet of HTML: &lt;DIV id=&quot;mydiv&quot; style=&quot;background-color: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","footnotes":""},"categories":[9,13,16,3],"tags":[84,102,333,749,750],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p902K-2s","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/152"}],"collection":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/comments?post=152"}],"version-history":[{"count":3,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/152\/revisions"}],"predecessor-version":[{"id":1637,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/posts\/152\/revisions\/1637"}],"wp:attachment":[{"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/media?parent=152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/categories?post=152"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/juixe.com\/techknow\/index.php\/wp-json\/wp\/v2\/tags?post=152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}