Esquinas redondeadas en CSS

CSS | Esquinas redondeadas : En este tutorial, vamos a aprender cómo hacer esquinas redondeadas usando CSS (Cascading Style Sheet)?

CSS | Esquinas redondeadas

propiedad border-radius se utiliza comúnmente para elementos de caja convertir 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.

básica 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

Rounded Corners in CSS - 4

En el ejemplo anterior, 50% frontera de radio se aplica a todos los rincones .

propiedades Esquina curva

  • frontera de radio
  • border-top-izquierda-radio
  • border-top-derecha-radio
  • frontera–parte inferior izquierda radio
  • border-bottom -justo-radio

1) la frontera de radio

Este CSS propiedad especifica el radio de las esquinas del elemento. propiedad border-radius puede tener valores entre uno a cuatro.

1) 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;
}

2) Dos valores

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

Sintaxis:

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

3) tres valores

Esta propiedad toma tres valores para el primer valor de frontera-radius.The se aplica a la esquina superior izquierda y el segundo valor se aplica a esquinas inferior izquierda y superior derecha, y el tercer valor se aplica a la esquina inferior derecha.

Sintaxis:

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

4) cuatro valores

Esta propiedad toma cuatro valores a la frontera de radio y se aplica cuatro valores diferentes para cada uno del primer valor corners.The se aplica a la parte superior esquina -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.

Sintaxis:

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

border-top-izquierda-radio

Esta propiedad especifica el radio de la esquina superior izquierda. Esta propiedad toma el valor de longitud y en % donde % define la forma de la esquina superior izquierda en % .

Sintaxis:

Element {
border-top-left-radius: 50%
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background: #a44170;
width: 200px;
height: 150px;
border-top-left-radius: 15px;
}
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<p></p>
</body>
</html>

salida

Rounded Corners in CSS - 5

En el ejemplo anterior, la esquina superior izquierda es redondeado.

border-top-derecha radio

Esta propiedad especifica el radio de la esquina superior derecha. Esta propiedad toma valores en longitud y en % donde % define la forma de la esquina superior derecha en % .

Sintaxis:

Element {
border-top-right-radius: 50%;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background: #a44170;
width: 200px;
height: 150px;
border-top-right-radius: 15px;
}
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<p></p>
</body>
</html>

salida

Rounded Corners in CSS - 6

En el ejemplo anterior, la esquina superior derecha es redondeado.

frontera-parte inferior izquierda de radio

Esta propiedad especifica el radio de la esquina inferior izquierda. Esta propiedad toma valores en longitud y en % donde % define la forma de la esquina inferior izquierda en % .

Sintaxis:

Element {
border-bottom-left-radius: 50%;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background: #a44170;
width: 200px;
height: 150px;
border-bottom-left-radius: 15px;
}
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<p></p>
</body>
</html>

salida

Rounded Corners in CSS - 7

En el ejemplo anterior, la esquina inferior izquierda es redondeado.

border-bottom-derecha radio

Esta propiedad especifica el radio de la esquina inferior derecha. Esta propiedad toma valores en longitud y en % donde % define la forma de la esquina inferior derecha en % .

Sintaxis:

Element {
border-bottom-right-radius: 50%;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
p {
background: #a44170;
width: 200px;
height: 150px;
border-bottom-right-radius: 15px;
}
</style>
</head>
<body>
<h1>CSS Rounded Corners</h1>
<p></p>
</body>
</html>

salida

Rounded Corners in CSS - 8

En el ejemplo anterior, la esquina inferior derecha es redondeado.


Deja un comentario

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