Saltar al contenido

Esquinas redondeadas CSS

septiembre 23, 2021

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 »


¡Ponte a prueba con ejercicios!


Propiedades de esquinas redondeadas CSS

close