Bordes redondeados con CSS 3

Publicado por admin en

Compartir:
Hace unos años recuerdo que para poder trabajar con bordes redondeados en un sitio web, debíamos crearlos desde Photoshop o Fireworks (o el programa que utilicen) y si eran para cajas de texto escalables, debíamos cortar en varios pedazos para llamar las imágenes desde css.
Bueno ahora esto es más sencillo, no tiene que utilizar algún programa como Photoshop, para crear bordes redondeados, solo necesita utilizar CSS.
 

Empecemos:
Primero para este ejemplo hemos creado un archivo html básico, con el nombre de “redondeado.html”.

Creamos 4 div con class diferentes, “border1”… “border4” y colocamos un contenido de ejemplo dentro de cada divs.
Creamos un CSS, para este ejemplo le hemos puesto el nombre de “style.css” y luego linkeamos el html con la hoja de estilo, utilizando la línea:<link rel=»stylesheet» type=»text/css» href=»style.css»>.
Creamos estilos directamente para el div, que son estándar para todos los demás divs (recuerden que los CSS son heredados).

Ahora la propiedad que vamos a utilizar para realizar el borde redondo es border- radius, esta propiedad acepta un máximo de dos valores en los navegadores WebKit y hasta ocho ahora en Firefox 3.5.
Algo importante por el momento la propiedad border-radius, no trabaja en Internet Explorer
Estos son los CSS y los atributos específicos de los diferentes navegadores:

CSS3 (Opera browser) Mozilla equivalent WebKit equivalent
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-radius -moz-border-radius -webkit-border-radiu

Las cuatro esquinas redondeadas.
Utilizando la clase border1, vamos a cambiar las propiedades de div, para redondear las cuatro esquinas.

Código CSS:

Como vimos en la tabla anterior, la propiedad “-moz-border-radius: 1em”, la utilizamos para los navegadores firefox y” -webkit-border-radius: 1em”, para los navegadores Safari y también funciona en google Chrome.

Dos esquinas redondeadas.
Podemos utilizar esta propiedad para redondear solo las dos esquinas superiores.

Código CSS:

Para el ejemplo 2, definimos en la clase border2, los radios para topright y topleft, tanto para mozilla como para webkit.

Esquinas redondeadas y sombreado
Para hacer más interesante este ejercicio, podemos agregarle sobreando a nuestro divs y de paso también redondear las esquinas.

Veamos:

Código CSS:

Para el ejemplo 3, utilizamos las propiedasd para redondear las cuatro esquinas, y las siguiente propiedades son para realizar el sombreado del divs. Los valores que se definen en orden son:  el desplazamiento horizontal «2px», el desplazamiento vertical «2px», el blur radius «6px» y por último el color «rgba(0,0,0,0.4)», pero también lo pueden definir en hexadecimal, ej: #ccc.

Espero les ayude bastante!!!

Ejemplo del ejercicio aquí.

Ver Hoja de Estilo


Artículo escrito por: Hanzel Mata R.

por si desea colaborar:





Categorías: Blog

3 commentarios

fern · 17 septiembre, 2012 a las 15:41

Hola a todos,
lo primero, gracias por la clase, muy útil.
Yo estoy usando Aurora 14.0a2 (2012-05-31) y esto no me funciona, hasta ahora pensaba que hacia algo mal, pero no me funciona ni el ejemplo de esta página.
Por favor, me podeis comentar si es compatible con esta versión?

Un saludo.

admin · 17 septiembre, 2012 a las 17:04

Hola! Fern

Puede probar utilizando border-radius: #; ej:
.border1{
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}
agregue esta propiedad utilizando aurora 17.0a2 (2012-09-17) y funciono bien. Le paso el ejemplo con la actualización para que lo pruebe http://www.hachedesign.com/practice/redondeado.html

    fern · 18 septiembre, 2012 a las 16:52

    Hola, gracias, esto ha funcionado, ahora voy a ver si soy capaz de mantener una pequeña separacione entre los div para darle un poco de elegancia

Los comentarios están cerrados.