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.

[css]
/*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;
}
[/css]

Macgrafic - Tutoriales InDesign, Photoshop y fotografía. Vectorizar logo » CSS3

Bordes redondeados con CSS3