Esquinas redondeadas con CSS

  • Por
  • CSS
Otra manera de hacer un efecto de esquinas redondeadas con CSS e imágenes en elementos con anchura variable. Que funciona bien con Firefox u Opera, pero no con Internet Explorer.
Existen muchas formas de conseguir un efecto de esquinas redondeadas con CSS. En nuestro taller de CSS ya vimos algunas maneras de hacer ese efecto. En este artículo vamos a ver otras maneras interesantes porque nos permiten construir cajas de anchura y color variable. Lo malo de este método es que no funciona con Internet Explorer, pues utiliza los pseudo-elementos after o before, que por el momento no tienen soporte en el navegador de Microsoft.

Este método de conseguir las esquinas redondeadas con CSS lo he visto en el artículo Rounded corners in CSS, yo simplemente me he dedicado a adaptarlo a otro diseño. Podemos ver el resultado final del ejercicio en una página aparte.

Para el ejemplo utilizo varias imágenes que he puesto en un archivo para descarga. Como veréis, hemos utilizado imágenes en formato png, porque se adaptan mejor a nuestras necesidades, por el adecuado tratamiento que da el formato png a las transparencias.

Como decía, lo bueno de este sistema es que soporta cajas de cualquier anchura o altura. Pero no sólo eso, sino que también permite cajas de cualquier color de fondo que se quiera emplear, utilizando las mismas imágenes para crear el efecto de esquinas redondeadas.

La técnica que se utiliza en este caso es la utilización de pseudo-elementos after o before, para insertar antes y después del recuadro las imágenes con borde redondeado en las cuatro esquinas. Para ello se han creado las siguientes definiciones de estilos CSS.

.redondeado:before {
   background: transparent url(arr-der.png) scroll no-repeat top right;
   margin-bottom: -10px;
   height: 14px;
   display: block;
   border: none;
   content: url(arr-izq.png);
   padding: 0;
   line-height: 0.1;
   font-size: 1px;
}

.redondeado:after {
   display: block;
   line-height: 0.1;
   font-size: 1px;
   content: url(aba-izq.png);
   margin: 2px 0 0 0;
   height: 14px;
   background: transparent url(aba-der.png) scroll no-repeat bottom right;
   padding: 0;
}


Como se puede ver, se ha creado una clase "redondeado" utilizado las cuatro imágenes de las esquinas, insertándolas como contenido y fondo de los elementos de antes y después del elemento HTML que deseamos que aparezca redondeado.

La definición de la clase redondeado se completa con otras declaraciones de estilos:

.redondeado * {
   padding-left: 25px;
   padding-right: 25px;
}

.redondeado {
   padding: 0;
   background: #993333;
   color: white;
   margin-right: -1px;
}


La primera sirve para indicar que cualquier etiqueta o elemento que se coloque dentro de la caja con class=redondeado tenga un espaciado a la derecha y la izquierda.

En la segunda declaración se añaden nuevos estilos a la clase redondeado, entre los que se incluye el color de fondo.

El código HTML para hacer una capa con esquinas redondeadas sería el siguiente:

<div class="redondeado">
<p>
Texto de la caja con esquinas redondas?
</p>
</div>


Se puede ver que el código HTML queda extremadamente limpio.

Podemos experimentar con diversos colores de fondo para el elemento o la caja con las esquinas redondeadas, para adaptarlas a nuestras necesidades. Dejo aquí dos enlaces al mismo ejercicio simplemente cambiando el color de fondo: Se puede jugar también con otras imágenes, pero si cambiamos el tamaño de las imágenes tendremos que cambiar algunos valores de márgenes de los pseudos elementos after y before. Lo mejor es que veáis el código fuente de los resultados finales para entenderlos y adaptarlos a vuestras necesidades.

Esta técnica tiene un problema, lamentablemente bastante gordo, que no funciona en Internet Explorer porque no tiene en cuenta los pseudo-elements after y before. En Internet Explorer 7 no funciona y no lo he probado todavía en Internet Explorer 8, que ya está en fase beta. Pero esperemos que el navegador de Microsoft se adapte pronto a las características avanzadas de CSS2.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

joanoz

08/3/2010
tabla con bordes redondeados ¡AYUDA!
hola.... ke tal amigos de la gran comunidad de desarrolloweb.com.
tengo un problema muy grande con mi web..... lo primero quiero darle un cambio al estilo ke he venido llevando hasta ahora con mis tablas... y ke mejor ke darle curva a las esquinas para una mayor estetica..... me gusto mucho ese truco del CSS pero me gustaria saber ¿que significan las variables de los pseudo-elementos?????? es decir ps para saber como puedo modificar mas rapidamente estos atributos......

Muchas gracias a todos por su ayuda......
esta web es lo mejor FELICITACIONES!!!!!!!!

Ke viva Manizales-Colombia

midesweb

26/3/2010
pseudoelementos
Hola Juanoz,

En el manual de CSS explicamos lo que son los pseudoelementos.
http://www.desarrolloweb.com/articulos/1956.php

Espero que puedas encontrar allí la información que buscas.
Saludos!

txerokey

05/4/2012
con css y javascript
bueno he visto que este tema es bastante antiguo ya y dado que es un tema muy recurrido lo de las esquinas redondeadas y todavia no nos atrevemos a usar demasiado css3 os dejo un enlace a una página donde nos ayudan a hacerlo de una forma muy sencilla a traves de javascript y css.

txerokey

05/4/2012
el enlace
no salió el enlace, lo vuelvo a poner:
http://www.html.it/articoli/niftycube/index.html