CSS

Desde la creación del lenguaje de Hojas de Estilo en Cascada se han publicado 3 especificaciones, que han ido ampliando las propiedades y posibilidades de aplicación de estilos a páginas web.

CSS 1 y CSS2 están totalmente aceptadas por el panorama actual de navegadores modernos. Sin embargo la más nueva especificación del lenguaje, CSS 3, todavía no está soportada por todos los navegadores. Algunos clientes web como Safari o Firefox ya implementan algunas de las características de CSS 3, aunque otros como Internet Explorer no han empezado aun a incorporar nada nuevo.

CSS 3 será una revolución para los diseñadores y permitirá ahorrar mucho código HTML que hasta el momento se debe agregar a las páginas para llegar a soluciones estéticas como los bordes redondeados o asignación de múltiples fondos a los elementos, colores con degradados, transparencia, etc.

CSS usa una sintaxis sencilla cuyos componentes más importantes son los selectores y los atributos.

Los selectores permiten seleccionar elementos de la página, ya sea por un nombre de etiqueta, un identificador del elemento o un determinado class.

Los atributos permiten asignar estilos a los elementos seleccionados con los selectores, a través de diversos valores que se pueden indicar.

Los estilos en los bordes se pueden aplicar a casi todos los elementos HTML disponibles, como tablas, botones, div, etc.
CSS nos permite personalizar los border especificando su tamaño, color y estilo. Tambien el lado del borde a alterar (left/right/top/bottom).

Propiedades de tamaño -->

tamaño a los cuatro lados: border-width
tamaño lado izquierdo: border-left-width
tamaño lado derecho: border-right-width
tamaño lado superior: border-top-width
tamaño lado inferior: border-bottom-width


Propiedades de color -->

color a los cuatro lados: border-color
color lado izquierdo: border-left-color
color lado derecho: border-right-color
color lado superior: border-top-color
color lado inferior: border-bottom-color


Propiedades de estilo -->

estilo a los cuatro lados: border-style
estilo lado izquierdo: border-left-style
estilo lado derecho: border-right-style
estilo lado superior: border-top-style
estilo lado inferior: border-bottom-style


Los estilos disponibles son: none, dashed, groove, outset, hidden, solid, ridge, inherit, dotted, double, inset.
Y para combinar todo lo demas, existe la propiedad border, en la cual se indica su estilo, color y tamaño a la vez. Sin importar el orden de las propiedades, ejemplo:

border: 1px dashed red;

El border-radius es una nueva etiqueta implementada en CSS 3 con la cual puedes conseguir sin necesidad de imagenes, jQuerys y demás formas que se han ido utilizando hasta hoy y que comparadas con esto son complicadas, esto es lo mas fácil que te puedes encontrar por aquí para crear tus bordes redondos.

Ventajas:
*No ensucia el código
*No crea demasiadas lineas
*Es una forma fácil de aprender y recordar
*Tiene la posibilidad de ponerle el redondeo que desees a las esquinas

Desventajas:
*No he encontrado ninguna, pero si alguien la encuentra, por favor, escríbase aquí.

Explicación
Antes de empezar a deciros como son los códigos y a ponernos a hacer locuras con el pues primero debemos de aprender por que es -moz- y porqué -webkit-, os lo explico a continuación.
-moz-border-radius es para los navegadores Firefox 3 o posteriores, por lo que si tu haces tus bordes redondos con el -moz- pues solo se verá así en los navegadores Firefox 3 y superiores.
Pero para eso se ha creado también el -webkit- el cual hace este efecto en los navegadores siguientes:

*Safari
*Google Chrome
*Epiphany
*Midori
*Arora
*Rekonq
*Swift
*OmniWeb (a partir de su versión 5.5)
*Shiira
*Web Browser for S60

Uso del Border-Radius Bueno, despues de la anterior explicación ya os empiezo a explicar como se usa el borde-radius. Empecemos, veamos una linea:

#div {
-moz-border-radius: 15px ; //Esta linea hace que todos los bordes del div sean redondos con 15px. Esto en Firefox.
-Webkit-border-radius: 15px ; //Esta linea hace que todos los bordes del div sean redondos con 15px. Y esto en los navegadores anteriormente nombrados.
}

Ahora veamos las lineas exactas para darle esa forma redonda a posiciones específicas, ahora os voy a mostrar los codigos separados para poseer un orden mayor, empecemos por el -moz-:

-moz-border-radius-topleft: 15px ; //Esta linea hace que el borde izquierdo-arriba sea redondo.
-moz-border-radius-topright: 15px ; //Esta linea hace que el borde derecho-arriba sea redondo.
-moz-border-radius-bottomleft: 15px ; //Esta linea hace que el borde izquierdo-abajo sea redondo.
-moz-border-radius-bottomright: 15px ;  //Esta linea hace que el borde derecho-abajo sea redondo.

Espero que no haya problemas al entender esto. Ahora veamos el -webkit-, que es exactamente igual pero se le cambia el principio, véanlo:

-webkit-border-radius-topleft: 15px ; //Esta linea hace que el borde izquierdo-arriba sea redondo.
-webkit-border-radius-topright: 15px ; //Esta linea hace que el borde derecho-arriba sea redondo.
-webkit-border-radius-bottomleft: 15px ; //Esta linea hace que el borde izquierdo-abajo sea redondo.
-webkit-border-radius-bottomright: 15px ;  //Esta linea hace que el borde derecho-abajo sea redondo.

Ya está, eso es todo lo que se tiene que hacer para poder hacer bordes redondos con CSS 3, como podéis ver, es mas fácil que estar instalando un jQuery o estar usando imágenes (algo que en opinión ensucia demasiado el código, me refiero a las imágenes).
Pues creo que esto es todo. Si alguien ve que le falta algo a esto, por favor, comunicarlo o editadlo directamente por favor. Saludos