Bordes redondeados con CSS3

Macgrafic — Thu, 23 Jul 2009 14:09:43 +0000

Con la implementación de las nuevas reglas incluidas en CSS3 y las nuevas versiones de los principales navegadores (Firefox, basado en el motor Gecko) y (Safari y Google Chrome, basado en el motor Webkit) podemos crear bordes redondeados directamente desde CSS3, sin usar Javascript

Con este código CSS3 podremos ver, en Firefox 3, Safari 4 y Google Chrome, las esquinas redondeadas.

/*Para ver las esquinas redondeadas en
Firefox 3 y posteriores */
#ejemplo_001 {
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-bottomleft: 10px;
}

/*Para ver las esquinas redondeadas en
Safari 4, Google Chrome y posteriores */
#ejemplo_002 {
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
}

#ejemplo_003 {
 border-radius: 10px;
 -moz-border-radius: 10px;/* Firefox, or Gecko-based browsers */
 -webkit-border-radius: 10px;/* Safari, or Webkit-based browsers */
}

#ejemplo_004 {
 border-top-right-radius: 10px;
 border-top-left-radius: 10px;
 border-bottom-right-radius: 10px;
 border-bottom-left-radius: 10px;
}

Macgrafic - Tutoriales de diseño gráfico, InDesign, Photoshop, Freehand, Illustrator y fotografía » CSS3

Bordes redondeados con CSS3