De todas las fantásticas propiedades mágicas de CSS3, el radio de borde fue uno de los primeros en los que me aferré. Tenía sentido para mí desde el principio, y podía ver usos prácticos inmediatos (al menos, en la medida en que un borde puede ser práctico). Si aún no estás usando la propiedad border-radius, asegúrate de revisar mi artículo sobre cómo usarlo.
Desafortunadamente, a pesar de que los navegadores más avanzados empezaron a admitir el radio de la frontera hace años, no todos los navegadores están al día todavía. Al momento de escribir este artículo, Border-Radius es compatible con Webkit (Safari / Chrome), Firefox, y el rumor lo tiene Konqueror, aunque no tengo una instalación de Linux, así que no puedo demostrarlo. Eso deja a Opera e Internet Explorer fuera del juego. He escuchado rumores de que Opera admitirá el radio de la frontera pronto, pero la última versión aún no está disponible.
Como argumenté en mi último artículo sobre el tema, la mayoría de los lugares que la gente debería usar en las esquinas redondeadas hoy se ubican en el ámbito de la "mejora progresiva": el sitio se ve mejor con el elemento redondeado, pero no es el fin del mundo si alguien Ve una esquina cuadrada.
Por supuesto, lo que debería ser cierto y lo que requiere un cliente no siempre es lo mismo.
Me encontré con este problema recientemente. Necesitaba crear nuevos botones en CSS para reemplazar docenas de botones con muchas imágenes. Los botones tenían todos anchos diferentes, pero por lo demás eran muy similares: color de fondo, texto centrado ... y esquinas redondeadas.
Hice un trabajo rápido de los botones para los navegadores que admiten el radio de borde, pero que dejaron a Opera e IE fuera de la diversión. Para ellos, desarrollé una forma diferente de redondear las esquinas, pero luego necesitaba una forma rápida de saber qué navegadores proporcionaban la solución simple de radio de borde y cuáles la solución más compleja.
Entra en jQuery. La siguiente secuencia de comandos pequeña extiende el objeto jQuery.support para incluir información de radio de borde:
jQuery (function () {
 jQuery.support.borderRadius = falso;
 jQuery.each (['BorderRadius', 'MozBorderRadius', 'WebkitBorderRadius', 'OBorderRadius', 'KhtmlBorderRadius'], function () {
  if (document.body.style [this]! == undefined) jQuery.support.borderRadius = true;
  return (! jQuery.support.borderRadius);
 });
});
Eso es todo lo que se necesita, amigos. Puedes copiarlo, o descargar el script desde aquí. Y si quieres probarlo, aquí tienes una página de ejemplo rápida y sucia.
$ .support.borderRadius es un booleano: si el navegador admite el radio de borde, es cierto, de lo contrario es falso. Por ejemplo, podrías usarlo así:
$ (function () {
 if ($. support.borderRadius) { 
  alerta ('Puedo hacer esquinas redondeadas!'); 
 } else { 
  alerta ('No hay esquinas redondeadas para mi!'); 
 }
});
Y ahora, porque este es un blog tutorial, explicaré cómo funciona el script. La multitud de copiar / pegar puede dejar de leer ahora. :)

Cómo funciona

Estamos llevando a cuestas aquí en un objeto existente en jQuery llamado jQuery.support. Ya contiene mucha información sobre lo que el navegador del usuario admite o no. La prueba de compatibilidad con el navegador se considera el heredero de la práctica de "rastreo del navegador". En lugar de verificar qué navegador está usando alguien, en lugar de eso, probamos lo que ese navegador puede y no puede hacer.
Entonces, lo primero que hacemos es agregar borderRadius al objeto de soporte y establecerlo en "falso" de forma predeterminada.
A continuación, hacemos un bucle a través de una matriz de propiedades CSS usando jQuery.each (). La matriz contiene todas las versiones específicas del proveedor de radio de borde, así como la versión estándar de CSS3 (que actualmente no es compatible con nadie, pero eventualmente lo será). Incluso he incluido la versión con prefijo de vendedor de Opera, en caso de que Opera agregue soporte.
Para cada estilo, probamos si el navegador entiende el estilo al ver qué está configurado. Si está configurado en blanco (o un valor, para el caso), entonces el estilo es compatible. Si no está definido, eso significa que el navegador no entiende la propiedad: no admite esa versión de radio de borde.
Si encontramos una propiedad CSS que el navegador entiende, eso significa que es compatible con el radio de borde. Establecemos borderRadius para ser verdad y salimos de nuestro bucle. De lo contrario, borderRadius permanece falso.
Y eso es todo lo que hay que hacer. Déjame saber lo que piensas. Si tienes sugerencias para mejorar, me encantaría escucharlas. Y la próxima semana, intentaré publicar un tutorial en radio de borde donde he usado este script.