Esquinas redondeadas CSS
Con el CSS border-radius propiedad, puede dar a cualquier elemento «esquinas redondeadas».
Propiedad de radio de borde de CSS
El CSS
border-radius La propiedad define el radio de las esquinas de un elemento.
Propina: ¡Esta propiedad le permite agregar esquinas redondeadas a los elementos!
A continuación, se muestran 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 {
radio del borde: 25px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners2 {
radio del borde: 25px;
borde: 2px sólido # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners3 {
radio del borde: 25px;
fondo: url (paper.gif);
posición de fondo: arriba a la izquierda;
background-repeat: repetir;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
Inténtalo tú mismo »
Propina: los border-radius propiedad es en realidad una propiedad taquigráfica de la
border-top-left-radius, border-top-right-radius, border-bottom-right-radius
y border-bottom-left-radius propiedades.
CSS border-radius: especificar cada esquina
los border-radius La propiedad puede tener de uno a cuatro valores. Estas son las reglas:
Cuatro valores – radio de borde: 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: radio de borde: 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 – radio de borde: 15px; (el valor se aplica a las cuatro esquinas, que se redondean por igual:
Aquí está el código:
Ejemplo
# rcorners1 {
radio del borde: 15px 50px 30px 5px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners2 {
radio del borde: 15px 50px 30px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners3 {
radio del borde: 15px 50px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners4 {
radio de borde: 15px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
Inténtalo tú mismo »
También puede crear esquinas elípticas:
Ejemplo
# rcorners1 {
radio del borde: 50px / 15px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners2 {
radio del borde: 15px / 50px;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
# rcorners3 {
radio de borde: 50%;
fondo: # 73AD21;
relleno: 20px;
ancho: 200px;
altura: 150px;
}
Inténtalo tú mismo »