Si bien es posible realizar bordes redondeados CSS compatible con IE, Firefox, Safari, Chrome y Opera, algunas veces queremos prescindir del uso de CSS3 y realizar dicho efecto con HTML y CSS2 stándard.
En este artículo te enseño una técnica para realizar bordes redondeados CSS con la utilización de imágenes y sin CSS3.
Para realizar el efecto de bordes redondeados CSS sin utilizar la ultima versión de CSS3, existen 2 técnicas. Aquí explicaré una de ellas, la cual considero más simple y rápida de implementar.
Esta técnica consiste en realizar un DIV por cada elemento que querramos aplicarle un borde redondeado, y luego por medio de CSS, aplicarle de fondo de DIV, una imagen con bordes redondeados.
Primero, necesitaremos tener preparado el fondo completo con bordes redondeados.
En este caso ya lo preparé. Utilizaremos el siguiente JPG llamado «fondo.jpg»:
Segundo paso: crearemos un DIV que incluirá a modo de ejemplo, una linea de texto:
<div id="contenedor">Texto de ejemplo.</div>
Luego, crearemos un selector para dicho DIV y le aplicaremos algunas propiedades CSS:
#contenedor {
background-image: url(fondo.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 193px;
width: 252px;
padding: 10px;
}
Con la propiedad background-image: url(fondo.jpg) , le aplicamos al DIV una imagen de fondo llamada «fondo.jpg». (nuestro cuadrado celeste con bordes redondeados)
La propiedad background-repeat: no-repeat, le indica que no repita la imagen de fondo, sino que la aplica q sola vez.
La siguiente propiedad background-position: left top, especifica que coloque dicha imagen comenzando desde el borde superior izquierdo del elemento DIV en cuestión.
Y por último con las propiedades height: 193px, width: 252px y padding: 10px especificamos un alto de div de 193 pixeles, un ancho de 252 y un padding (distancia de borde) de 10pixeles.
El padding sirve para que los contenidos que estarán dentro del DIV, no queden sobre el borde de la imagen de fondo.
El codigo completo de este ejemplo seria:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor {
background-image: url(fondo.jpg);
background-repeat: no-repeat;
background-position: left top;
height: 193px;
width: 252px;
padding: 10px;
}
</style>
</head>
<body>
<div id="contenedor">Texto de ejemplo.</div>
</body>
</html>
Transparencia
Si tuviéramos el caso de tener una imagen o textura de fondo en nuestro documento, y quisiéramos utilizar esta técnica, podríamos usar la imagen con bordes redondeados pero en formato PNG con transparencia. (sin fondo, solo la placa celeste en este caso)
Esto permitiría dejar ver nuestro fondo en las esquinas de nuestro elemento.
De esta forma podemos aplicar bordes redondeados CSS con imágenes, a cualquier elemento de nuestro documento HTML, sin necesidad de utilizar CSS3.
Saludos!
Cristian
Deja una respuesta