{"id":20,"date":"2008-12-17T19:00:58","date_gmt":"2008-12-17T17:00:58","guid":{"rendered":"http:\/\/webposible.com\/xposible\/2008\/css3-y-border-radius-esquinas-redondeadas\/"},"modified":"2020-01-28T18:12:33","modified_gmt":"2020-01-28T16:12:33","slug":"css3-y-border-radius-esquinas-redondeadas","status":"publish","type":"post","link":"https:\/\/webposible.com\/xposible\/2008\/css3-y-border-radius-esquinas-redondeadas\/","title":{"rendered":"CSS3 y border-radius: esquinas redondeadas"},"content":{"rendered":"<p>Uno de los elementos imprescindibles para cualquier sitio web al estilo 2.0 (junto con los degradados, reflejos y colores pastel) son las esquinas redondeadas (n\u00f3tese la iron\u00eda).<\/p>\n<p>Sabemos que hay t\u00e9cnicas para hacerlo mediante <acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> e im\u00e1genes de fondo (\u00bfqui\u00e9n no se acuerda de <a href=\"http:\/\/simplelogica.net\/caoticoneutral\/?p=15\">Redondeando esquinas (I)<\/a> y <a href=\"http:\/\/simplelogica.net\/caoticoneutral\/?p=17\">Redondeando esquinas (II)<\/a> ?).<\/p>\n<p><ins datetime=\"2011-02-16\">En la especificaci\u00f3n de <acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> 3 podemos encontrar una forma m\u00e1s sencilla de hacerlo, mediante el atributo <a href=\"http:\/\/www.w3.org\/TR\/css3-background\/#the-border-radius\"><code>border-radius<\/code> (especificaci\u00f3n <acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> 3 del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>)<\/a>, mediante el uso de las siguientes propiedades: <code>border-radius border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius<\/code>. Aunque la implementaci\u00f3n de esa propiedad ha sido irregular en los principales navegadores: puedes encontrar un resumen en <a href=\"http:\/\/caniuse.com\/#feat=border-radius\" xml:lang=\"en\" hreflang=\"en\">can i use &#8211; border-radius<\/a>.<\/ins><br \/>\n<ins datetime=\"2011-02-16\">Aqu\u00ed va un resumen:<\/ins><\/p>\n<ul>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Firefox<\/strong>: en las versiones 3.x las soporta mediante el prefijo <code>-moz<\/code> (<code>-moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft<\/code>). A partir de la versi\u00f3n 4, est\u00e1 previsto que siga la sintaxis del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>.<\/ins><\/li>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Safari<\/strong>: al menos desde la versi\u00f3n 3.2 hasta la versi\u00f3n 4, soportaba esquinas redondeadas mediante el prefijo <code>-webkit<\/code> (<code>-webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius<\/code>). A partir de la versi\u00f3n 5 sigue la sintaxis del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>.<\/ins><\/li>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Safari (iOS)<\/strong>, desde la versi\u00f3n 3.2 hasta la 4.2 soporta las esquinas redondeadas con el prefijo <code>-webkit<\/code>.<\/ins><\/li>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Chrome<\/strong>: al menos desde la versi\u00f3n 7, sigue la sintaxis del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>.<\/ins><\/li>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Opera<\/strong>: Desde la versi\u00f3n 10.5 soporta esquinas redondeadas con la sintaxis del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>.<\/ins><\/li>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Explorer<\/strong>: se espera que a partir de la versi\u00f3n 9 siga la sintaxis del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym>. Para versiones las versiones entre la 6 y la 8 &#8211; se puede usar <a href=\"http:\/\/css3pie.com\/\"><acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> <acronym title=\"Progressive Internet Explorer\">PIE<\/acronym><\/a>. Hay circulando un error bastante insistente diciendo que a partir de cierta versi\u00f3n de <strong xml:lang=\"en\">Explorer<\/strong> soportaba esquinas redondeadas con el prefijo <code>-ms<\/code>, pero como digo, es falso.<\/ins><\/li>\n<li><ins datetime=\"2011-02-16\"><strong xml:lang=\"en\">Konqueror<\/strong>A pesar de que ha habido gente que ha dicho que soportaba esquinas redondeadas con el prefijo <code>-khtml<\/code> (yo entre ellos), lo cierto es hasta la versi\u00f3n 3.4 que no hay ninguna notica al respecto (se puede consultar en <a href=\"http:\/\/www.konqueror.org\/css\/\" xml:lang=\"en\" hreflang=\"en\"><acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> 2.1 &#038; 3 Support in KHTML 3.4<\/a>).<\/ins><\/li>\n<\/ul>\n<p><del datetime=\"2011-02-16\">En la especificaci\u00f3n de <acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> 3 podemos encontrar una forma m\u00e1s sencilla de hacerlo, mediante el atributo <a href=\"http:\/\/www.w3.org\/TR\/css3-background\/#the-border-radius\"><code>border-radius<\/code> (especificaci\u00f3n <acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> 3 del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym> )<\/a> (recordemos, de momento es un borrador y pueden pasar a\u00f1os hasta que sea una recomendaci\u00f3n). Pero hasta que llegue ese momento, y mientras se concretan los atributos y valores, cada motor de navegador que se precie (excepto Opera y <span xml:lang=\"en\">Explorer<\/span> ) tiene su propia implementaci\u00f3n de esta propiedad, con <em>sutiles<\/em> diferencias. Hay que tener en cuenta que estas implementaciones de <acronym title=\"Cascading Style Sheet\" xml:lang=\"en\">CSS<\/acronym> se pueden cosiderar como una especie de <em>versi\u00f3n beta<\/em> , y que todav\u00eda no est\u00e1 claro que la especificaci\u00f3n del <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym> cambie m\u00e1s adelante (como lo ha hecho recientemente).<\/del><\/p>\n<p><del datetime=\"2011-02-16\">Aqu\u00ed se recopilan las propiedades definidas por el <acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym> , <span xml:lang=\"en\">mozilla, khtml <span xml:lang=\"es\">y<\/span> webkit<\/span> . Empezando por el borde redondeado para toda la caja, y despu\u00e9s para las esquinas individuales (esquinas superior-izquierda, superior-derecha, inferior-derecha e inferior-izquierda, como las agujas del reloj).<\/del><\/p>\n<h3><del datetime=\"2011-02-16\"><acronym title=\"World Wide Web Consortium\" xml:lang=\"en\">W3C<\/acronym> (borrador)<\/del><\/h3>\n<pre><del datetime=\"2011-02-16\"><code>border-radius\r\nborder-top-left-radius\r\nborder-top-right-radius\r\nborder-bottom-right-radius\r\nborder-bottom-left-radius<\/code><\/del><\/pre>\n<h3 xml:lang=\"en\"><del datetime=\"2011-02-16\">Mozilla (Firefox, SeaMonkey, K-meleon,&#8230;)<\/del><\/h3>\n<pre><del datetime=\"2011-02-16\"><code>-moz-border-radius\r\n-moz-border-radius-topleft\r\n-moz-border-radius-topright\r\n-moz-border-radius-bottomright\r\n-moz-border-radius-bottomleft\r\n<\/code><\/del><\/pre>\n<h3 xml:lang=\"en\"><del datetime=\"2011-02-16\">Khtml (Konqueror)<\/del><\/h3>\n<pre><del datetime=\"2011-02-16\"><code>-khtml-border-radius\r\n-khtml-border-top-left-radius\r\n-khtml-border-top-right-radius\r\n-khtml-border-bottom-right-radius\r\n-khtml-border-bottom-left-radius<\/code><\/del><\/pre>\n<h3 xml:lang=\"en\"><del datetime=\"2011-02-16\">Webkit (Safari, Chrome)<\/del><\/h3>\n<pre><del datetime=\"2011-02-16\"><code>-webkit-border-radius\r\n-webkit-border-top-left-radius\r\n-webkit-border-top-right-radius\r\n-webkit-border-bottom-right-radius\r\n-webkit-border-bottom-left-radius<\/code><\/del><\/pre>\n<h3><del datetime=\"2011-02-16\">Qu\u00e9 pasa con Opera y <span xml:lang=\"en\">Explorer<\/span><\/del><\/h3>\n<p><del datetime=\"2011-02-16\">Del <span xml:lang=\"en\">Explorer<\/span> se ha hablado en algunos sitios de una propiedad <code>-ms-border-radius<\/code> , pero <strong>no existe<\/strong> (\u00bftodav\u00eda?). Y en Opera,&#8230; tampoco existe, pero, hay una forma de crear esas esquinas redondeadas usando como im\u00e1genes de fondo ficheros <acronym title=\"Scalable Vector Graphics\" xml:lang=\"en\">svg<\/acronym> : puedes verlo en la secci\u00f3n <span xml:lang=\"en\">Rounded corners<\/span> del art\u00edculo New development techniques using Opera Kestrel (9.5).<\/del><\/p>\n<h3>Esquinas redondeadas usando <span xml:lang=\"en\">javascript<\/span><\/h3>\n<p>Existe otra forma de lograr tener esquinas redondeadas en navegadores de versiones antiguas mediante <span xml:lang=\"en\">javascript<\/span>, como podemos ver en Nifty Corners Cube , <a xml:lang=\"en\" hreflang=\"en\" href=\"http:\/\/plugins.jquery.com\/project\/corners\">jQuery Corners<\/a> y probablemente unos cuantos cientos de sitios m\u00e1s.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Uno de los elementos imprescindibles para cualquier sitio web al estilo 2.0 (junto con los degradados, reflejos y colores pastel) son las esquinas redondeadas (n\u00f3tese la iron\u00eda). Sabemos que hay t\u00e9cnicas para hacerlo mediante CSS e im\u00e1genes de fondo (\u00bfqui\u00e9n no se acuerda de Redondeando esquinas (I) y Redondeando esquinas (II) ?). En la especificaci\u00f3n [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32],"tags":[33,34],"_links":{"self":[{"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/20"}],"collection":[{"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":14,"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/posts\/20\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webposible.com\/xposible\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}