Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             




NICOTINE FREE

Publish perfectly-optimized content in 1-click



 
 
 

Cómo se redondea el radio de un borde en CSS?

 
 

La propiedad border-radius

 

La propiedad CSS border-radius redondea las esquinas de un elemento HTML.
Por lo tanto, los tres cuadrados con esquinas redondeadas a continuación se distinguen por el valor
establecido en border-radius: 15px, 25px y 35px.
.style-1 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 15px;
}

 
Cómo se redondea el radio de un borde en CSS?
 

.style-2 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 25px;
}

 
Cómo se redondea el radio de un borde en CSS?
 
.style-3 {
  width: 150px;
  height: 150px;
  background-color: #04AA6D;
  border-radius: 35px;
}


Por tanto, el valor introducido corresponde a la distancia sobre la que se aplica el efecto de redondeo.
y se aplica por defecto a las cuatro esquinas del elemento.
 
Cómo se redondea el radio de un borde en CSS?
 

 

¿Cómo distinguir los cuatro ángulos de la forma?

 
Para variar los cuatro ángulos, puedes usar las cuatro propiedades correspondientes a los cuatro ángulos.
 
Cómo se redondea el radio de un borde en CSS?
 

Una solución más simple es usar la versión abreviada border-radius especificando 2 o 4 valores.
Al ingresar dos valores, se distinguen las esquinas superior izquierda/inferior derecha de las esquinas superior derecha/inferior izquierda.
.style-4 {
  width: 250px;
  height: 250px;
  background: #04AA6D;
  border-radius: 0% 34% 0% 39%;
}

 
Cómo se redondea el radio de un borde en CSS?
 
Al ingresar cuatro valores, se distinguen los cuatro ángulos girando alrededor de la forma en el sentido de las agujas del reloj.
comenzando desde la esquina superior izquierda.
.style-5 {
  width: 250px;
  height: 250px;
  background: #04AA6D;
  border-radius: 10% 20% 30% 40%;
}

 
Cómo se redondea el radio de un borde en CSS?
 

 

Distinciones de rayos verticales y horizontales.

 
Para distinguir los rayos horizontales de los rayos verticales, basta con introducir los dos valores
separándolos con una barra inclinada /. Los valores ingresados ​​antes de la barra inclinada se aplican a los rayos horizontales y
los valores introducidos después se aplican a los rayos verticales.
 
Cómo se redondea el radio de un borde en CSS?
 

En el siguiente ejemplo, los rayos horizontales se establecen en 40 px para las cuatro esquinas y la vertical
los rayos se establecen en 10px para las cuatro esquinas.
.style-6 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 40px / 10px;
}

 
Cómo se redondea el radio de un borde en CSS?
 

Siguiendo las mismas reglas que vimos anteriormente, es posible introducir hasta ocho valores de ángulo,
cuatro para los ángulos horizontales y cuatro para los ángulos verticales:
borde-radio: Rh1 Rh2 Rh3 Rh4 / Rv1 Rv2 Rv3 Rv4 ;

 

Ejemplos de formas

 

 

Círculo

.style-7 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 50px;
  /* or  with percent %*/ 
  border-radius: 50%;
}

 
Cómo se redondea el radio de un borde en CSS?
 

 

Una chincheta

.style-8 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 100% 0% 100% 100%;
}

 
Cómo se redondea el radio de un borde en CSS?
 
 

Un cuarto de circulo

.style-9 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 0% 0% 0% 100% 
}

 
Cómo se redondea el radio de un borde en CSS?
 

 

Un limón

.style-10 {
  width: 250px;
  height: 250px;
  background-color: #04AA6D;
  border-radius: 80% 10% 80% 10%;
}

 
Cómo se redondea el radio de un borde en CSS?
 

 

Puedes usar esta pequeña herramienta para generar el código css

 

También te puede interesar


Cómo podemos hacer animaciones solo con CSS

Cómo crear un menú horizontal en CSS

Cómo crear un menú con css y javascript

Cómo crear un formulario de registro con HTML y CSS

Cómo hacer un sitio web responsivo

Cómo crear efecto GLITCH con CSS

Como cambiar el estilo de las barras de desplazamiento

Cómo crear un efecto de enfoque al pasar el mouse usando CSS

Cómo crear un pie de página usando Bootstrap: tutorial y ejemplo


Leave comment
          

Guardar apodo y correo electrónico en este navegador para la próxima vez.



Cargando...     

Nord VPN