Esquinas redondeadas CSS
Esquinas redondeadas CSS
Con la propiedad CSS border-radius, puede dar a cualquier elemento "esquinas redondeadas".
Propiedad CSS border-radius
La propiedad CSS
border-radiusdefine el radio de las esquinas de un elemento.
Sugerencia: ¡Esta propiedad le permite agregar esquinas redondeadas a los elementos!
Aquí hay tres ejemplos:
1. Esquinas redondeadas para un elemento con un color de fondo específico:
¡Esquinas redondeadas!
2. Esquinas redondeadas para un elemento con borde:
¡Esquinas redondeadas!
3. Esquinas redondeadas para un elemento con 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;
}
Sugerencia: La border-radiuspropiedad es en realidad una propiedad abreviada de las
propiedades border-top-left-radius, border-top-right-radiusy .border-bottom-right-radiusborder-bottom-left-radius
CSS border-radius - Especificar cada esquina
La border-radiuspropiedad puede tener de uno a cuatro valores. Estas son las reglas:
Cuatro valores - border-radius: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la esquina inferior derecha y el cuarto valor se aplica a la esquina inferior izquierda):
Tres valores - border-radius: 15px 50px 30px; (el primer valor se aplica a la esquina superior izquierda, el segundo valor se aplica a las esquinas superior derecha e inferior izquierda y el tercer valor se aplica a la esquina inferior derecha):
Dos valores - border-radius: 15px 50px; (el primer valor se aplica a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplica a las esquinas superior derecha e inferior izquierda):
Un valor - border-radius: 15px; (el valor se aplica a las cuatro esquinas, que se redondean por igual:
Aquí está el código:
Ejemplo
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
También puedes crear esquinas elípticas:
Ejemplo
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
Propiedades de esquinas redondeadas CSS
| Property | Description |
|---|---|
| border-radius | A shorthand property for setting all the four border-*-*-radius properties |
| border-top-left-radius | Defines the shape of the border of the top-left corner |
| border-top-right-radius | Defines the shape of the border of the top-right corner |
| border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
| border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |