Segundo tutorial de una serie en los cuales trataremos de profundizar en lo que nos depara el nuevo CSS3. En esta ocasión aprenderemos a utilizar la propiedad CSS border-radius con la cual podremos recrear bordes redondeados. Para ello compararemos el método antiguo mediante javascript con el nuevo que nos propone CSS3.

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

Introducción: ¿Qué vamos a hacer?

Continuamos con tutoriales relacionados con CSS3 con los cuales pretendemos profundizar en las nuevas posibilidades que nos ofrece esta nueva versión.

En este tutorial aprenderemos a crear bordes redondeados para nuestros elementos mediante dos métodos:

  • Método clásico: Utilizando javascript.
  • Método nuevo: Utilizando la nueva propiedad border-radius en CSS3.

Nuevamente estamos ante un tutorial relativamente corto, pero que nos permitirá recrear los bordes redondeados de una forma fácil y elegante para nuestros diseños web, sin tener que recurrir a javascript, imágenes de fondo y otros trucos. ¡Vamos a por ello!

Paso 1: La estructura HTML

Definiremos dos divisiones sobre las cuales trabajaremos y aplicaremos tanto el método clásico como el nuevo método para recrear los bordes redondeados:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Cómo crear bordes redondeados con CSS3: método clásico VS nuevo</title>
    <link rel="stylesheet" href="main.css" type="text/css" media="screen" />
</head>
<body>
    <div class="wrapper">
        <h1>Cómo crear bordes redondeados con CSS3: método clásico VS nuevo</h1>
        <h2>Método clásico con javascript mediante jQuery</h2>
        <div class="caja antiguo">
			Utilizando javascript podemos recrear los bordes redondeados.
        </div>
        <h2>Método nuevo mediante border-radius de CSS3</h2>
        <div class="caja nuevo">
			Utilizando CSS3 junto con la propiedad border-radius podemos recrear los bordes redondeados.
        </div>
    </div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.corners.js"></script>
	<script type="text/javascript">  
		$(function(){
			$('.antiguo').corners('10px');
		});
	</script>
</body>
</html>

Como podéis ver, ambas divisiones comparten las propiedades de estilo de la clase de CSS “caja” y luego definimos dos clases que diferenciarán cada método: antiguo y nuevo.

.caja{
    width:200px;
    background: #fff;
    padding:20px;
}

Una vez tenemos aplicado el estilo visual para nuestras cajas, es hora de echar un vistazo a las características y forma de aplicar cada método.

Paso 2: Método clásico con javascript (jQuery)

En esta ocasión nos hemos inclinado por javascript para aplicar el método clásico de redondeado de bordes, pero también existen otras formas de hacerlo, la más conocida es la de utilizar imágenes de fondo simulando los bordes redondeados mediante la propiedad CSS background-image.

Pero en esta ocasión utilizaremos un método mucho más rápido y cómodo desde el punto de vista del desarrollador, utilizaremos jQuery y el plugin jQuery Corners el cual nos permite aplicar el borde redondeado deseado en base un selector de jQuery que nosotros especifiquemos:


De esta forma, todo elemento de nuestra estructura HTML que tenga la clase “antiguo” tendrá un borde redondeado de 10 pixels. Es realmente fácil y sencillo, sobretodo comparándolo con el método de imágenes de fondo, ya que requiere de una imagen de fondo por cada una de las cuatro esquinas (aunque también se podría hacer con 2, una arriba y otra abajo para anchos fijos).

Veamos ahora el método nuevo, empleando CSS3.

Paso 3: Método nuevo con border-radius de CSS3

Este método es como debería haber sido desde un principio: una propiedad de CSS. El funcionamiento es relativamente parecido al método clásico de javascript, sólo que no dependemos de librerías externas de javascript ni similares, todo ello lo realizará el motor de renderizado de CSS de cada navegador.

Actualmente no está estandarizado, y cada navegador (aunque no todos) tiene una implementación de la clase que permite asignar bordes redondeados a nuestros elementos: border-radius:

/******* METODO CSS3 *******/
.caja.nuevo{
    border-radius: 10px;  
    -moz-border-radius: 10px;  
    -webkit-border-radius: 10px; 
}
/******* /METODO CSS3 *******/

Como véis estamos utilizando propiedades CSS “no oficiales” que son propias de cada navegador / motor de renderizado: -moz- se refiere a navegadores Mozilla, -webkit- a motores basados en webkit (Safari o Chrome por ejemplo).

Actualmente la mayoría de navegadores tienen su propia nomenclatura para asignar e implementar la propiedad de CSS3 border-radius, pero todos terminarán empleando la propiedad original border-radius.

Como podréis ver las ventajas son evidentes, no necesitamos incluír ningún tipo de código javascript, ni imágenes de fondo, ni divisiones adicionales, sólo debemos definir en pixels la curvatura del borde redondeado mediante la propiedad border-radius en nuestro código CSS.

Reflexión final

A pesar de que son ya muchos los diseñadores que utilizan formas redondeadas en sus diseños web, la propiedad border-radius todavía no está estandarizada y es necesario el uso de métodos clásicos como los vistos anteriormente: javascript, imágenes de fondo, divisiones adicionales, etc.

Con la futura llegada y estandarización del HTML 5 y el CSS3 no tendremos tantos problemas ni dolores de cabeza, pero deberemos tener en cuenta que todavía existirá gente con navegadores anticuados (principalmente Internet Explorer) que nos obligarán a seguir utilizando “métodos clásicos”, por no llamarlos chapuzas.

Espero que os haya gustado este breve tutorial y… ¡nos vemos en el próximo!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (7 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Juan

IE, 7 no implementa la propiedad border-radius

bueno ya todos sabemos que el IE no sirve el no se soporta ni a el mismo jejejejeje buen aporte me gusta eso de no tener que estar buscando librerías por hay gracias

Leandro

Excelente tutorial, pero me pregunto, si pongo muchos bordes redondeados con jquery, me relentizará la página?

Saul

exelente, y el chiste de IE estuvo buenisimo tambien….

José

Hola disculpa, yo solo soy un aficionado al tema, te agradezco por la información, pero referido a bordes redondeados aqui hay un vídeo tutorial donde explica como trabajar con estos en css y html5
http://www.youtube.com/watch?v=pp2aNmvM9Bw&feature=relmfu

saludos

felipe

Ningun IE implementa el border radius :P … Buena info, supongo que con javascript se veran los bordes redondeados en IE