La frontera de radio propiedad de CSS

CSS | la frontera de radio propiedad : En este tutorial, vamos a aprender acerca de la propiedad la frontera de radio en CSS (Cascading Style Sheet).

CSS | la frontera de radio propiedad propiedad

El la frontera de radio se utiliza comúnmente para elementos de caja se convierten en círculos. Podemos convertir elementos de caja en el elemento círculo estableciendo la frontera de radio a la mitad de la longitud de un elemento cuadrado.

Sintaxis:

Element {
Width: 150px;
Height: 150px;
border-radius: 50%;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background: #73AD21;
width: 200px;
height: 150px;
border-radius: 50%
}
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<p></p>
</body>
</html>

salida

The border-radius Property in CSS - 4

En el ejemplo anterior, 50% frontera de radio se aplica a todas las esquinas.

propiedad 1) la frontera de radio con un valor

La propiedad toma un único valor a la frontera de radio y se aplica ese valor para todas las cuatro esquinas y las esquinas están redondeadas por igual.

Sintaxis:

Element {
border-radius: 15px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>

salida

The border-radius Property in CSS - 5

En el ejemplo anterior, la frontera de radio de 25 píxeles se aplica a los cuatro lados Igualmente.

2) Propiedad frontera de radio con dos valores

Esta propiedad toma dos valores para la frontera de radio . El primer valor se aplica a parte superior izquierda y esquinas inferiores derecha, el segundo valor se aplica a superior derecha y esquinas inferiores izquierda.

Sintaxis:

Element {
border-radius: 15px 10px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid red;
padding: 10px;
border-radius: 60px 30px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>

salida

The border-radius Property in CSS - 6

En el ejemplo anterior, la frontera de radio de 60px se aplica a parte superior izquierda y la inferior derecha y 30px se aplica a superior derecha y esquinas inferior izquierda.

3) Propiedad frontera de radio con tres valores

Esta propiedad toma tres valores a la frontera de radio . El primer valor se aplica a la parte superior izquierda esquina y el segundo valor se aplica a esquinas inferiores izquierda superior derecha y, y el tercer valor se aplica a la esquina inferior derecha .

Sintaxis:

Element {
border-radius: 15px 10px 30px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid green;
padding: 10px;
border-radius: 60px 30px 20px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>

salida

The border-radius Property in CSS - 7

En el ejemplo anterior, frontera de radio de 60px se aplica a superior -IZQUIERDA esquina, 30px se aplica a superior derecha y esquinas inferiores izquierda y 20px se aplica a esquina inferior derecha.

4) Propiedad frontera de radio con cuatro valores

Esta propiedad toma cuatro valores a la frontera de radio y aplica cuatro valores diferentes para cada una de las esquinas. El primer valor se aplica a la parte superior izquierda esquina , el segundo valor se aplica a la esquina superior derecha, el tercer valor se aplica a la parte inferior derecha esquina y se aplica el cuarto valor a la parte inferior izquierda esquina.

Sintaxis:

Element {
border-radius: 15px 10px 20px 5px;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid green;
padding: 10px;
border-radius: 60px 30px 50px 10px;
}
</style>
</head>
<body>
<div>
<p>Border Radius in CSS</p>
</div>
</body>
</html>

salida

The border-radius Property in CSS - 8

En el ejemplo anterior, 60px se aplica a esquina superior izquierda , 30px se aplica a la esquina superior derecha , 50px se aplica a esquina inferior derecha y 10px se aplica a parte inferior izquierda esquina de la caja.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *