La propiedad border-radius en CSS se usa para redondear las esquinas de los bordes exteriores de un elemento. Esta propiedad puede contener uno, dos, tres o cuatro valores. La propiedad border-radius se usa para establecer el border-radius. Esta propiedad no se aplica a los elementos de la tabla cuando el borde colapsado se está colapsando.
Sintaxis:
border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;
Valores de propiedad:
- length : Representa la forma de las esquinas y el valor por defecto es 0.
- porcentaje(%) : Representa la forma de las esquinas en %.
- initial : se utiliza para establecer la propiedad CSS de un elemento en su valor predeterminado.
- heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
Los 4 valores para cada radio se pueden especificar en el siguiente orden: arriba a la izquierda, arriba a la derecha, abajo a la derecha, abajo a la izquierda. Si se elimina la parte inferior izquierda, será igual que la parte superior derecha. Del mismo modo, si se eliminan la parte inferior derecha y la parte superior derecha, será lo mismo que la parte superior izquierda y la parte superior izquierda, respectivamente.
border-radius: la propiedad border-radius puede contener uno, dos, tres o cuatro valores.
borde-radio: 35px; Se utiliza para establecer el radio del borde de cada esquina. Es la combinación de cuatro propiedades: border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius. Establece todas las esquinas al mismo valor.
Ejemplo: este ejemplo ilustra la propiedad border-radius cuyo valor se especifica mediante el valor único.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 35px;</p>
</div>
</body>
</html>
Producción:
borde-radio: 20px 40px; Esta propiedad se utiliza para establecer el primer valor como esquina superior izquierda e inferior derecha y el segundo valor como esquina superior derecha e inferior izquierda.
Ejemplo: Este ejemplo ilustra la propiedad border-radius cuyo valor se especifica mediante valores dobles.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px;</p>
</div>
</body>
</html>
Producción:
borde-radio: 20px 40px 60px; Esta propiedad se utiliza para establecer el primer valor en 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.
Ejemplo: Este ejemplo ilustra la propiedad border-radius cuyo valor es especificado por los valores triples.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px 60px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px 60px;</p>
</div>
</body>
</html>
Producción:
borde-radio: 20px 40px 60px 80px; Esta propiedad se utiliza para establecer el primer, segundo, tercer y cuarto valor del radio del borde en las esquinas superior izquierda, superior derecha, inferior derecha e inferior izquierda, respectivamente.
Ejemplo: Este ejemplo ilustra la propiedad border-radius cuyo valor está especificado por los cuatro valores.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-radius: 20px 40px 60px 80px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-radius: 20px 40px 60px 80px;</p>
</div>
</body>
</html>
Producción:
Ahora, entenderemos las propiedades abreviadas para la propiedad border-radius dada a continuación.
border-top-left-radius : esta propiedad se utiliza para especificar el radio de la esquina superior izquierda de un elemento.
Ejemplo: Este ejemplo ilustra la propiedad border-radius donde el valor de la propiedad se aplica a la esquina superior izquierda de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-left-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-left-radius: 35px;</p>
</div>
</body>
</html>
Producción:
border-top-right-radius : Esta propiedad se usa para definir el radio de la esquina superior derecha del borde de un elemento dado.
Ejemplo: Este ejemplo ilustra la propiedad border-radius donde el valor de la propiedad se aplica a la esquina superior derecha de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-right-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-right-radius: 35px;</p>
</div>
</body>
</html>
Producción:
border-bottom-left-radius : Esta propiedad se utiliza para definir el radio de la esquina inferior izquierda del borde, es decir, hace que la parte inferior izquierda del borde sea redonda.
Ejemplo: Este ejemplo ilustra la propiedad border-radius donde el valor de la propiedad se aplica a la esquina inferior izquierda de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-bottom-left-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-bottom-left-radius: 35px;</p>
</div>
</body>
</html>
Producción:
border-bottom-right-radius : Esta propiedad se usa para definir el radio de la esquina inferior derecha del borde de un elemento dado.
Ejemplo: Este ejemplo ilustra la propiedad border-radius donde el valor de la propiedad se aplica a la esquina inferior derecha de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-bottom-right-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-bottom-right-radius: 35px;</p>
</div>
</body>
</html>
Producción:
propiedad mixta border-radius: esta propiedad se utiliza para establecer todas las esquinas en el valor dado.
Ejemplo: Este ejemplo ilustra la propiedad border-radius donde el valor de la propiedad se aplica a todas las esquinas de un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Rounded Corners</title>
<style>
.GFG {
border-top-left-radius: 35px;
border-top-right-radius: 35px;
border-bottom-left-radius: 35px;
border-bottom-right-radius: 35px;
background: #009900;
padding: 30px;
text-align: center;
width: 300px;
height: 120px;
}
</style>
</head>
<body>
<div class="GFG">
<h2>GeeksforGeeks</h2>
<p>border-top-left-radius: 35px;
<br>border-top-right-radius: 35px;
<br>border-bottom-left-radius: 35px;
<br>border-bottom-right-radius: 35px;</p>
</div>
</body>
</html>
Producción:
Taquigrafías:
- Aplique el valor de Radio a las cuatro esquinas:
border-radius: value;
- Aplique value1 a las esquinas superior izquierda e inferior derecha y value2 a las esquinas superior derecha e inferior izquierda:
border-radius: value1 value2;
- Aplique value1 a la esquina superior izquierda, value2 a las esquinas superior derecha e inferior izquierda y value3 a la esquina inferior derecha:
border-radius: value1 value2 value3;
- Aplicar value1 a la esquina superior izquierda, value2 a la esquina superior derecha, value3 a la esquina inferior derecha y value4 a la esquina inferior izquierda:
border-radius: value1 value2 value3 value4;
Navegadores compatibles:
- Google Chrome 5.0, 4.0 -webkit-
- Internet Explorer 9.0
- Microsoft Edge 12.0
- Firefox 4.0, 3.0 -moz-
- Ópera 10.5
- Safari 5.0, 3.1 -webkit-
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA