Creo que a muchos nos ha pasado que a veces queremos colocar algun div con sus esquinas redondeadas, hay muchas maneras de hacerlo entre las mas comunes son como editar imagenes y siento q es una menera muy complicada. En fin, navegando por la internet encontre una manera de alcanzar ese efecto facilmente, lo cual les explico como....
Existen excelentes navegadores como el firefox que traen su propiedad en css para generar este efecto de esquinas redondeadas (-moz-border-radius) al igual que el Safari (-webkit-border-radius) pero lastimosamente existen navedores muy cerrados como los es el IE que no tiene una propiedad que pueda generar esto.
Ahora bien para que este efecto funcion en la mayoria de navegadores haremos uso del
http://www.htmlremix.com/curved-corner-border-radius-cross-browser/ que es un hack css que nos facilita el hecho de generar este efecto.
Pasos a seguir...Paso 1:Debemos de descargar este archivo
border-radius.htcPaso 2:Una vez descargado dicho archivo, simplemente hacemos esto en nuestro estilo
.rendondear
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);
}
#capa
{
background-color: #F7F7F7;
width: 500px;
height: 400px;
margin-top: 20px;
border: #A0C7F1 solid 1px;
}
Y para aplicar el efecto hacemos esto...
<div id="capa" class="rendondear" align="center">
<br />
<p>Ejemplo de un Div con Bordes Redondeados</p>
</div>
Aca les dejo todo el codigo
<!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=iso-8859-1" />
<title>Esquinas Redondeadas</title>
<style type="text/css">
.rendondear
{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
behavior:url(border-radius.htc);
}
#capa
{
background-color: #F7F7F7;
width: 500px;
height: 400px;
margin-top: 20px;
border: #A0C7F1 solid 1px;
}
</style>
</head>
<body>
<div id="capa" class="rendondear" align="center">
<br />
<p>Ejemplo de un Div con Bordes Redondeados</p>
</div>
</body>
</html>
Bueno eso es todo, espero que les sirva y ademas ahi les adjunto este pequeño ejemplo..!
Saludos
Si ya estaba esto, pues disculpen y unanlo.
