How to: Crear bordes redondos con CSS y chicanearlos en IE8

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:

div css

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:
ejemplo css mas bordes redondos
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

div css

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 :D.

12 Comentarios

  1. Luis Oliver 9 septiembre 2009
  2. Eduardo 18 septiembre 2009
    • danielmd 18 septiembre 2009
      • Guillermo 27 mayo 2010
      • PINONO 1 noviembre 2010
        • danielmd 1 noviembre 2010
  3. Luis Bustos 7 junio 2010
    • danielmd 7 junio 2010
  4. webmaster&SEO 28 diciembre 2010
  5. YeraldReloaded 17 enero 2011
    • danielmd 17 enero 2011
      • YeraldReloaded 28 enero 2011

Deja un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.