{"id":37,"date":"2010-12-13T20:14:53","date_gmt":"2010-12-14T01:14:53","guid":{"rendered":"http:\/\/localhost\/aarontgrogg\/practicalcss3\/"},"modified":"2010-12-13T20:14:53","modified_gmt":"2010-12-14T01:14:53","slug":"border-radius","status":"publish","type":"page","link":"https:\/\/aarontgrogg.com\/practicalcss3\/border-radius\/","title":{"rendered":"border-radius"},"content":{"rendered":"<p><code>border-radius<\/code> is absolutely one of those styles that I would seriously consider simply dropping for older browsers, if possible.  It usually lends very little to the user, often carries a lot of overhead, and will likely not be missed by the user.  Keep in mind that the traditional definition of &#8220;cross-browser&#8221; is really only pertinent to those QAing the page, because NO ONE else looks at the same site in multiple browsers.  So, as long as your shit doesn&#8217;t break, you&#8217;re cross-browser.<\/p>\n<p>That said, if you <em>do<\/em> need those rounded corners, here are ways to do it.<\/p>\n<h2>The Options<\/h2>\n<ul>\n<li>\n<h3><a href=\"css3-pie\">CSS3 PIE<\/a><\/h3>\n<h4>Pros:<\/h4>\n<ul>\n<li>Comes as a single package, which also adds linear background gradients and drop-shadows to IE (only).<\/li>\n<li>Is IE-only, so non-IE browsers get no additional weight, and if you add via an IE-only stylesheet, the rest of your stylesheets will validate (if that matters to you).<\/li>\n<\/ul>\n<h4>Cons:<\/h4>\n<ul>\n<li>Comes as a single package, so if you <em>don&#8217;t<\/em> need those other features on a page, at 27.6kb, it&#8217;s a little heavy&#8230;<\/li>\n<li>Because it requires a non-standard <code>behavior<\/code> for implementation, the stylesheet used to add this will not validate (if that matters to you).<\/li>\n<li>Implementation requires JS; without JS, nothing happens.<\/li>\n<li>Not all servers permit HTC files.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>The Bottom-Line<\/h2>\n<p>I initially had several methods, but CSS3 PIE was the only one to prove stable in all the situations I tried to use it.  So, if you need rounded corners, I&#8217;d say use CSS3 PIE.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>border-radius is absolutely one of those styles that I would seriously consider simply dropping for older browsers, if possible. It usually lends very little to the user, often carries a lot of overhead, and will likely not be missed by &hellip; <a href=\"https:\/\/aarontgrogg.com\/practicalcss3\/border-radius\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":2,"comment_status":"open","ping_status":"closed","template":"","meta":{"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"class_list":["post-37","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/37","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/comments?post=37"}],"version-history":[{"count":0,"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/pages\/37\/revisions"}],"wp:attachment":[{"href":"https:\/\/aarontgrogg.com\/practicalcss3\/wp-json\/wp\/v2\/media?parent=37"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}