Bordes Redondeados con CSS

La implementación de bordes redondeados en HTML normalmente se hacer utilizando imágenes de fondo o con otras técnicas que por lo general son engorrosas, esta vez les presentamos una técnica muy sencilla con la que podemos crear elementos con esquinas redondeadas de manera sencilla.

Como lo hacemos
Para crear bordes redondeados con CSS en Firefox, podemos utilizar la propiedad -moz-border-radius y si utilizamos Safari se puede utilizar la propiedad -webkit-border-radius, pero para Internet Explorer no hay posibilidad de hacerlo nativamente.
Entonces para ello haremos uso de un hack que fue publicado en Curved corner (border-radius) cross browser, este hack se ha preparado en un archivo border-radius.htc. Entonces luego de descargar el archivo, para aplicar los bordes redondeados creamos un estilo de la forma:

1. .curved {
2.     -moz-border-radius: 10px;
3.     -webkit-border-radius: 10px;
4.     behavior:url(border-radius.htc);
5. }

 Luego podemos aplicar este estilo a cualquier div que nosotros deseamos, como se muestra a continuación:

1. id="alert" class="curved">Curved Corner

Con esto logramos obtener las esquinas redondeadas que se verán correctamente en todos los navegadores y con unas pocas líneas.
Observaciones
He probado este hack y por defecto le pone un borde al div que elegimos, para eliminar este efecto es necesario agregar un borde con el mismo color de fondo del elemento. Además de ello por defecto hace que el div al que se aplica los bordes redondeados se muestre centrado, para evitar ello agregamos un par de líneas a nuestro CSS (float y clear).

1. #alert {
2.     width: 250px;
3.     background-color: #A0C7F1;
4.     border: #A0C7F1 solid 1px;
5.     clear: both;
6.     float: left;
7. }

 El código anterior crea un elemento de de 250 pixels de ancho con color de fondo y borde iguales. Este ejemplo lo podemos ver funcionando en Esquinas Redondeadas.

Fuente: http://blog.unijimpe.net/bordes-redondeados-crossbrowser/