Hoy les voy a dar unas clases de CSS, vamos a redonderle los bordes a unos div o cajitas que no son lo mismo que las tablas(las tablas son para mostrar datos, no para crear una web con tablas y celdas, no mamen!), primero de la forma normal y después de la forma chicaneada 
Empezamos, según la w3c que es la encargada de establecer todos los estándares web para facilitarnos la vida (simon!), si queremos redondear las esquinas de un elemento html se hace de la siguiente forma.
Añadiendo border-radius:10px; a las propiedades de nuestros elementos, donde obviamente el 10px puede variar dependiendo de que tan redondas queremos las esquinas, si colocan esa propiedad así como la puse, las cuatro esquinas del DIV quedaran redondas, pero que pasa si solo queremos las dos esquinas de abajo redondas? o las dos de arriba? o las de la derecha o solo una? Bueno, para eso tenemos las siguientes propiedades que nos facilitaran eso.
1 2 3 4 | border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius |
Con esas propiedades definimos que esquina vamos a redondear y le colocamos la medida del radio: 5px, 10px, 15px o lo que queramos. Pero como no todo en la vida es tan fácil, resulta que estas propiedades no jalan todavía en los navegadores actuales y estos tienen “sus propias propiedades propias de ellos” :O!! Por ejemplo, para redondear bordes con CSS para firefox y todos sus hijos (seamonkey,mozilla etc..) necesitamos estas:
1 2 3 4 5 | -moz-border-radius -moz-border-radius-topleft -moz-border-radius-topright -moz-border-radius-bottomright -moz-border-radius-bottomleft |
Para redondear esquinas con CSS para Chrome y Safari que utilizan esa onda del karatekit llamada webkit se utilizan estas:
1 2 3 4 5 | -webkit-border-radius -webkit-border-top-left-radius -webkit-border-top-right-radius -webkit-border-bottom-right-radius -webkit-border-bottom-left-radius |
Para IE8 supuestamente existe -ms-border-radius, pero nel!! no jala y tienes que utilizar hacks o fixes como iepngfix.htc o border-radius.htc
Ejemplo bordes redondos para Firefox y sus hijos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!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>
<title>Bordes redondos</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
body { text-align:center; }
.cajita {
width:200px;
padding:5px;
margin:0 auto 0 auto;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
background:#FF0000;
color:#fff;
text-align:left;
}
.cajita p{
padding 0px;
margin 0px;
background:#fff;
color:#000;
text-align:center;
}
</style>
</HEAD>
<BODY>
<div class="cajita">
<p>Titulo noticia</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..
</div>
</BODY>
</HTML> |
Resultado:
Para los demás navegadores(excepto IE) se hace de la misma forma, solo que debemos cambiar la propiedad -moz-border-radius-bottomright por las que sirven para los otros navegadores o simplemente agregar esas propiedades para que nuestra web se vea con bordes redondos en todos los navegadores no importa con cual se acceda.
Ahora, esta es la forma fea de crear bordes redondos a una web con IE(sin css), no importa si es ie6,ie7,ie8 etc..
Lo primero que tenemos que hacer es crear una imagen con los bordes ya dibujados, debe ser del mismo ancho que nuestra cajita y debe tener el mismo fondo para que no se note que es una imagen.
Por ejemplo:
Para esto vamos a ocupar 3 Divs, uno que sirva como contenedor, otro que es el que tiene la información y un tercero donde vamos a meter nuestra imagen que sirve de borde.
Este ejemplo esta hecho para que los bordes se vean en firefox, chrome, safari e ie.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!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>
<title>Bordes redondos</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<style type="text/css">
body { text-align:center; }
.cajita {
width:200px;
padding:5px;
margin:0 auto 0 auto;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
background:#FF0000;
color:#fff;
text-align:left;
}
.cajita p{
padding 0px;
margin 0px;
background:#fff;
color:#000;
text-align:center;
}
.bordeie8{
background:#FF0000;
}
</style>
</HEAD>
<BODY>
<div>
<div class="cajita">
<p>Titulo noticia</p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged..
</div>
<!--[if IE ]> <div class"bordeie8">
<img src="bottom.png" border="0">
</div>
<![endif]-->
</div>
</BODY>
</HTML> |
Si se dan cuenta utilice una condición que solo reconocen los navegadores explorer < !--[if IE ]> < ![endif]--> esta condición significa que si el navegador con el que entro X persona es IE(cualquiera) mostrara un div que contiene dentro de el una imagen que es la que tiene los bordes redondos, si no es IE no hara nada y mostrara los bordes como se definieron en las propiedades de la clase cajita.
Este es el resultado en IE8
Comentarios?, por si no los hay y creen que entendieron todo, pss a ver quien puede hacer un circulo dentro de otro circulo con puro CSS 
.
La verdad no lei la entrada bro (las próximas las leere) solo entre pa dejarte mi blog http://www.mexikali.wordpress.com
para que pases y yo estare aquí pasando apoyando a los bloggers de la zona.
Saludos
Hola Thx estaba buscando como redondear los bordes en el Google Chrome muchas Gracias, pero ahora me doy cuenta que en el IE8 no se me redondean:
ni con
border-radius:10px;
ni tampoco con
-ms-border-radius:10px;
Sabra alguien como se hace!!!!
Gracias !!!
Vas a tener que usar un fix.
Te bajas este archivo y lo guardas donde quieras
border-radius-ie8.htc
Si lo guardas en la misma carpeta que tus archivos simplemente lo mandas llamar en el CSS así
Y para usarlo y redondearle las esquinas a un div solo lo mandas llamar así
Sale!, espero te sirva, funciona en todos los IE.
Excelente aporte, Muchas Gracias!!!!!
como hago para que tome el borde y el color de borde…gracias.
con border-color:#333;
border-left-color, border-top-color etc..
Para el circulo dentro de otro…
el css
DIV.bordes {
text-align:center;
border: 1px solid #000000;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
behavior:url(includes/border-radius-ie8.htc);
padding: 50px;
max-width:50px;
border-color:#2A0000;
background-color:#FFFF00;
}
DIV.bordes_dentro {
border: 1px solid #000000;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
behavior:url(includes/border-radius-ie8.htc);
padding: 25px;
max-width:25px;
border-color:#2A0000;
background-color:#00FF55;
}
el html
Gracias Luis, solo que el blog filtra el código html y no aparece cuando se pone en los comentarios. Por eso no salio tu otro comentario donde colocaste el codigo html.
Saludos!.
no funciona en IE8 e inclusive desactiva el color de fondo
.banner3 {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius-ie8.htc);
text-align:center;
background-color: #FFFF00;
}
Buen tutorial amigo (muy coloquial, pero está chingó jeje)
Bueno, mi duda es con respecto a safari y chrome, lo que pasa es que sólo me aplica la curva en las esquinas izquierdas del documento (superior e inferior), me explixo, es como un cuadrado con dos esquinas redondas y dos no.
a que podrá deberse esto??
Pues tal vez estas utilizando las esquinas redondeadas de left y right, mejor utiliza algo asi.
-webkit-border-radius: 15px;
border-radius: 15px;
Ok gracias por la info, lo probaré llegando a casa.
No había tenido chance de ver si había nuevos comentarios jeje, pero en fín.
Te dejo una página de muestra para que veas como me quedaron:
http://yeraldreloaded.zxq.net/samples/sample_1.html
Yo lo hacía antes metiendo de fondo una imagen png con bordes redondeados, o transparencia, pero me di cuenta que las versiones antiguas del explorer no leían png o no respetaban transparencias.