Border-radius: crear bordes redondeados con CSS | Develop Site

Imagen de ernesto

La propiedad border-radius permite a los desarrolladores web diseñar bordes redondeados con CSS3 en sus diseños sin necesidad de utilizar imagenes o utilizar multiples div's.

El ejemplo que se ve en la imagen se hizo con el siguiente código:


Archivo style.css

#ejemplo1 {
height: 65px;
width:160px;
background-color:#EEEEEE;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}

#ejemplo2 {
height: 65px;
width:160px;
background-color:#FF0000;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}

#ejemplo3 {
height: 5em;
width: 12em;
background-color:#0000FF;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}

#ejemplo4 {
height: 65px;
width:160px;
background-color:#F2F2F2;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}

Sintaxis:

border-*-*-radius: [ | <%> ] [ | <%> ]?

Español
Taxonomy upgrade extras: