[Actualizado el 23/09/08]
Si has llegado a este post a trabes de google es posible que te interese mas esto: 16 técnicas para lograr esquinas redondeadas con CSS.
Hay que joderse lo que aprende uno de forma “accidental”.
Visitando el blog de un paisano amigo de toda la vida, Gart3n (por cierto, mañana es su cumpleaños), veo que ha puesto una plantilla nueva, y me llama un poco la atención el diseño de la caja de búsqueda. Lo típico –> subrayar (en Firefox) –> botón secundario –> Ver código fuente seleccionado –> miro en su id, class y atributos –> miro en su hoja de estilo (CSS) [<link rel="stylesheet" type="text/css" ...] y busco esos atributos --> veo un par de lineas que nunca he visto antes:
{
border-radius: 20px;
-moz-border-radius: 20px;
}
La segunda linea funciona solo con Firefox, la otra no, y no veo que funcione con otros navegadores, al menos de momento, por eso la pongo, por que a lo mejor en un futuro próximo los demás integran esta función.
Los que utilicen Firefox ya se habrán dado cuenta de que he aplicado ese efecto en muchos sitios en este blog (ej: comentarios, citas, caja de búsqueda…). Pantallazo:


Y en los demás navegadores tampoco se ve horrendo como lo he dejado (lo he comprobado con esta herramienta online: browsershots.org), asín que lo dejaré tal cual, ejemplo con Safari:


Bueno… de todos modos tengo pensado usar la plantilla por defecto de Wordpress u otra para este menester y comenzar un diseño desde cero (aplicando muchos truquitos que ya he utilizado en este).
[23/09/08] Se me olvidó decir que se puede indicar un radio diferente para cada esquina.
Ejemplo:
{
-moz-border-radius: 20px 30px 5px 0px;
}
Este post se complementa/actualiza con este otro: Esquinas Redondeadas Solo con CSS en WebKit (Safari, Chrome, etc.).