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

The property border-radius enables web developers to design rounded edges with CSS3 in their designs without using images or use multiple div's.

The example you see in the picture was made with the following code:


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: [ | <%> ] [ | <%> ]?

English
Taxonomy upgrade extras [en:field:taxonomyextra:blog:label]: