Bordes redondeados en CSS

Publicado el en la categoría Diseño y Programación

Seguimos viendo las características que incorpora CSS3 y en esta ocasión os vamos a explicar cómo realizar bordes redondeados.

Ahora en CSS3 existe la propiedad border-radius que nos permite redondear las esquinas de los elementos, indicando el radio que deberá tener dicha curvatura.

Si por ejemplo escribimos como estilo de un DIV lo siguiente:

DIV {
border: 1px solid #000000;
border-radius: 15px;
padding: 20px;
}

Obtendremos como resultado un DIV como el que se muestra a continuación:

Conseguimos que todos los bordes sean iguales, pero si queremos que cada uno de los bordes tenga una medida diferente deberemos escribir por ejemplo:

DIV {
border: 1px solid #000000;
border-radius: 15px 5px 20px 0px;
padding: 20px;
}

y obtendremos esto:

Facebooktwittergoogle_plus