CSS3 Esquinas redondeadas

Con la propiedad border-radius de CSS3, puedes crear "esquinas redondeadas" en cualquier elemento.

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite la propiedad.

Los números precedidos por -webkit- o -moz- indican la primera versión que admite ese prefijo.

Propiedad
border-radius	9.0	5.0 4.0 -webkit-	4.0 3.0 -moz-	5.0 3.1 -webkit-	10.5

Propiedad border-radius de CSS3

Con la propiedad border-radius de CSS3, puedes crear "esquinas redondeadas" en cualquier elemento.

A continuación se muestran tres ejemplos:

1. Esquinas redondeadas en un elemento con color de fondo especificado:

¡Esquinas redondeadas!

2. Esquinas redondeadas en un elemento con borde especificado:

¡Esquinas redondeadas!

3. Esquinas redondeadas en un elemento con imagen de fondo especificada:

¡Esquinas redondeadas!

El código es el siguiente:

Ejemplo

#rcorners1 {
    border-radius: 25px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Pruébalo »

CSS3 border-radius - Especificar cada esquina redondeada

Si especificas solo un valor en la propiedad border-radius, se generarán 4 esquinas redondeadas.

Sin embargo, si deseas especificar cada una de las cuatro esquinas, puedes usar las siguientes reglas:

Cuatro valores:El primer valor es la esquina superior izquierda, el segundo la esquina superior derecha, el tercero la esquina inferior derecha y el cuarto la esquina inferior izquierda.
Tres valores:El primer valor es la esquina superior izquierda, el segundo la esquina superior derecha y la inferior izquierda, el tercero la esquina inferior derecha.
Dos valores:El primer valor es la esquina superior izquierda y la inferior derecha, el segundo la esquina superior derecha y la inferior izquierda.
Un valor:Los cuatro valores de las esquinas redondeadas son iguales.

A continuación se muestran tres ejemplos:

1. Cuatro valores - border-radius: 15px 50px 30px 5px:

2. Tres valores - border-radius: 15px 50px 30px:

3. Dos valores - border-radius: 15px 50px:

El siguiente es el código fuente:

Ejemplo

#rcorners4 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners5 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners6 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Pruébalo »

También puedes crear esquinas elípticas:

Ejemplo

#rcorners7 {
    border-radius: 50px/15px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners8 {
    border-radius: 15px/50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners9 {
    border-radius: 50%;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Pruébalo »

Propiedades de esquinas redondeadas de CSS3

Propiedad	Descripción
border-radius	Forma abreviada de las propiedades border---radius para las cuatro esquinas.
border-top-left-radius	Define el radio de la esquina superior izquierda.
border-top-right-radius	Define el radio de la esquina superior derecha.
border-bottom-right-radius	Define el radio de la esquina inferior derecha.
border-bottom-left-radius	Define el radio de la esquina inferior izquierda.

Otras extensiones