CSS3 esquinas redondeadas
Con el CSS3 border-radius propiedad, se puede dar a cualquier elemento "esquinas redondeadas".
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
Los números seguidos por -webkit- o -moz- especifican la primera versión que funcionaba con un prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| border-radius | 5.0 4.0 -webkit- |
9.0 | 4.0 3.0 -moz- |
5.0 3.1 -webkit- |
10.5 |
CSS3 border-radius propiedad
Con CSS3, puede dar a cualquier elemento "esquinas redondeadas", mediante el uso de la border-radius propiedad.
He aquí tres ejemplos:
1. Las esquinas redondeadas para un elemento con un color de fondo especificado:
¡Esquinas redondeadas!
2. Las esquinas redondeadas para un elemento con una frontera:
¡Esquinas redondeadas!
3. Las esquinas redondeadas para un elemento de una imagen de fondo:
¡Esquinas redondeadas!
Aquí está el código:
Ejemplo
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
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;
} Inténtalo tú mismo "  | Consejo: La border-radius propiedad es en realidad una propiedad resumida para el border-top-left-radius , border-top-right-radius , border-bottom-right-radius y border-bottom-left-radius propiedades. |
|---|
CSS3 border-radius - Especificar cada esquina
Si sólo se especifica un valor para la border-radius propiedad, este radio se aplicará a las 4 esquinas.
Sin embargo, puede especificar cada esquina por separado si así lo desea. Estas son las reglas:
- Cuatro valores: primer valor se aplica a la parte superior izquierda, el segundo valor se aplica a la parte superior derecha, el tercer valor se aplica a la parte inferior derecha, y el cuarto valor se aplica a esquina inferior izquierda
- Tres valores: primer valor se aplica a la parte superior izquierda, el segundo valor se aplica a la parte superior derecha e inferior izquierda-y tercer valor se aplica a la parte inferior derecha
- Dos valores: primer valor se aplica a la esquina superior izquierda e inferior derecha, y el segundo valor se aplica a la parte superior derecha y la esquina inferior izquierda
- Un valor: las cuatro esquinas están redondeadas por igual
He aquí 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 :
Aquí está el código:
Ejemplo
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Inténtalo tú mismo " También podría crear esquinas elípticas:
Ejemplo
#rcorners7 {
border-radius: 50px/15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
} Inténtalo tú mismo " Ponte a prueba con los ejercicios!
CSS3 esquinas redondeadas Propiedades
| Propiedad | Descripción |
|---|---|
| border-radius | Una propiedad abreviada para establecer las cuatro fronteras - * - * - propiedades del radio |
| border-top-left-radius | Define la forma del borde de la esquina superior izquierda |
| border-top-right-radius | Define la forma del borde de la esquina superior derecha |
| border-bottom-right-radius | Define la forma del borde de la esquina inferior derecha |
| border-bottom-left-radius | Define la forma del borde de la esquina inferior izquierda |