TIP: Div con esquinas redondas SOLO con CSS

Seguro que muchos de los que habéis hecho algo de diseño web os habéis encontrado con el problema de realizar bordes redondos en las capas… Googleando la mayoría de los resultados ofrecen un sistema basado en imagenes, donde se coloca una imagen haciendo de esquina redonda… El sistema funciona en cualquier navegador y el resultado es positivo, pero es un sistema MUY coñazo si son muchas las capas en las que vas a hacer eso…

Tras un rato, me he topado con Unijimpe donde explica como hacerlo solo con css…

En el caso de navegadores decentes ( != IE) es muy fácil, pero en el caso de IE… ya está más complicado, aunque con un filtro especial lo podemos solucionar.

El filtro lo descargamos de aquí y añadimos lo siguiente al style de la capa:

-moz-border-radius: 10px;

-webkit-border-radius: 10px

border-radius: 10px

behavior:url(border-radius.htc);

El primero es para Mozilla y Firefox, el segundo para los navegadores Safiri, Konqueror y demás basados en webkit… El tercero es el oficial del CSS3 y se establecerá cuando este se extanderice… el behavior es para el de siempre…

Evidentemente el behaviour no está arpobado por el W3C y se limita ha añadir una función javascript, pero bueno, para hacer el apaño nos vale, aunque estamos más limitados al no poder seleccionar solo una esquina como con -moz-border-radius-topleft.

En Unijimpe también comentan un detalle sobre el borde y la alineción cuando se aplica el parche para IE:

Observaciones
He probado este hack y por defecto le pone un borde al div que elegimos, para eliminar este efecto es necesario agregar un borde con el mismo color de fondo del elemento. Además de ello por defecto hace que el div al que se aplica los bordes redondeados se muestre centrado, para evitar ello agregamos un par de líneas a nuestro CSS (float y clear).

Espero que os sirva de ayuda😛

Una respuesta a TIP: Div con esquinas redondas SOLO con CSS

  1. flaviocamus dice:

    GRacias!
    habia estado buscando una solucion a esto.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: