En este artículo, veremos qué es la propiedad de radio de contorno en CSS, además de conocer las diferentes propiedades disponibles en CSS para hacer la esquina redondeada.
La propiedad de radio de contorno se utiliza para especificar el radio de un contorno. Se utiliza para dar esquinas redondeadas a los contornos. Esta propiedad solo se puede usar en Firefox2-87 (hasta marzo de 2021) y desde Firefox 88, la propiedad de contorno sigue la forma creada por border-radius automáticamente, por lo que esta propiedad ya no es necesaria. Ahora, para dar esquinas redondeadas tenemos que usar la propiedad border-radius .
La propiedad border-radius se usa para redondear las esquinas de un elemento. Podemos establecer un solo radio para hacer las esquinas circulares, o dos radios para hacer las esquinas elípticas. Esta propiedad puede contener uno, dos, tres o cuatro valores.
Sintaxis:
border-radius: <length> {1-4} | <percentage> (1-4} |
initial | inherit
Ejemplo 1: el siguiente ejemplo de código demuestra cómo se puede utilizar la propiedad border-radius con uno o dos valores para hacer que las esquinas de un contorno sean circulares.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
outline: solid;
width: 400px;
padding: 10px;
margin: 20px;
}
.box1 {
outline: solid;
border-radius: 20px;
width: 400px;
padding: 10px;
margin: 20px;
}
.box2 {
outline: solid;
border-radius: 5px 30px;
width: 400px;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Example of border-radius with only
one/two value to make the corners
of an outline circular.
</h3>
<div class="box">
outline: solid;
</div>
<div class="box1">
<p>border-radius: 20px;</div>p>
<p>20px applies on <b>all 4 corners!</b></p>
</div>
<div class="box2">
<p>border-radius: 5px 30px;</p>
<p>
5px applies on <b>top-left and
bottom-right</b> corners.
</p>
<p>
30px applies on <b>top-right and
bottom-left</b> corners.
</p>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: el siguiente ejemplo de código demuestra cómo se usa la propiedad del radio del borde con tres o cuatro valores para hacer que las esquinas de un contorno sean circulares.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.box {
outline: solid;
width: 400px;
padding: 10px;
margin: 20px;
}
.box1 {
outline: solid;
border-radius: 10px 40px 20px;
width: 400px;
padding: 10px;
margin: 20px;
}
.box2 {
outline: solid;
border-radius: 10px 40px 20px 80px;
width: 400px;
padding: 10px;
margin: 20px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Example of border-radius with
three/four values to make the
corners of an outline circular.
</h3>
<div class="box">
outline: solid;
</div>
<div class="box1">
<p>border-radius: 10px 40px 20px;</p>
<p>10px applies on <b>top-left</b> corner</p>
<p>
40px applies on <b>top-right and
bottom-left</b> corners.
</p>
<p>20px applies on <b>bottom-right</b> corner.</p>
</div>
<div class="box2">
<p>border-radius: 10px 40px 20px 80px;</p>
<p>10px applies on <b>top-left</b> corner.</p>
<p>40px applies on <b>top-right</b> corner.</p>
<p>20px applies on <b>bottom-right</b> corner.</p>
<p>80px applies on <b>bottom-left</b> corner.</p>
</div>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chiragchouhan163 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA