Question

Es común ver páginas web con cuadros con bordes redondos, si no están usando imágenes ¿cómo lo hacen?

Answer 1

Para que sea compatible con todos los navegadores debería de ser así.

.rounded-corners {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

Para lograr que todos los ángulos estén con diferentes valores sería así:

-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 50px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 50px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 50px;

Saludos.

Answer 2

Algo asi quedaría, en este ejemplo esta hecho para un elemento con class="rounded-corners", espero te sirva.

 .rounded-corners

{

border-top-right-radius = 10px;

border-bottom-right-radius = 10px;

border-bottom-left-radius = 10px;

border-top-left-radius = 10px;

}