Bordes redondeados (border-radius)

La propiedad CSS border-radius permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.

El radio se aplica a todo el background, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad background-clip. Esta propiedad es un atajo para establecer las cuatro propiedades border-top-left-radius, border-top-right-radius, border-bottom-right-radius y border-bottom-left-radius. La propiedad border-radius define el radio de las esquinas del elemento.

bordes redondeados

Sugerencia: ¡Esta propiedad le permite agregar esquinas redondeadas a los elementos!

Esta propiedad puede tener de uno a cuatro valores. Estas son las reglas:

Podemos indicar el redondeo de cada vértice en forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda):

#rcorners4 {
border-radius: 15px 50px 30px 5px;
background-color:coral;
padding: 20px;
width: 200px;
height: 150px;
Cuatro valores - radio de borde: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior 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):



#rcorners5 {
border-radius: 15px 50px 30px
background-color:green;
padding: 20px;
width: 200px;
height: 150px;
Tres valores - radio de borde: 15px 50px 30px; (el primer valor se aplica a 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):



#rcorners6 {
border-radius: 15px 50px
background-color:lightblue;
padding: 20px;
width: 200px;
height: 150px;
Dos valores - border-radius: 15px 50px; (el primer valor se aplica a las esquinas superior izquierda e inferior derecha, y el segundo valor se aplica a las esquinas superior derecha e inferior izquierda):



#rcorners7 {
border-radius: 15px
background-color:gold;
padding: 20px;
width: 200px;
height: 150px;
Un valor - radio de borde: 15px; (el valor se aplica a las cuatro esquinas, que se redondean por igual:



Propiedades


  • length Denota el tamaño del radio del círculo o los ejes semi-mayor y semi-menor de la elipsis. Puede expresarse en cualquier unidad permitida por los length tipos de datos CSS . Los valores negativos no son válidos.
  • percentage Denota el tamaño del radio del círculo, o los ejes semi-mayor y semi-menor de la elipsis, usando valores porcentuales. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.

Ejemplos


 


border: solid 10px; /* the border will curve into a 'D' */ border-radius: 10px 40px 40px 10px;


 


border: groove 1em red; border-radius: 2em;





background: gold; border: ridge gold; border-radius: 13em/3em;


 


border: none; border-radius: 40px 10px;


 


border: none; border-radius: 50%;


Podemos indicar un único valor que se asignará a los cuatro vértices:

#recuadro1{
border-radius: 20px;
background-color:#ddd;
width:200px;
padding:10px;
}
border-radius

También podemos indicar el redondeo de cada vértice en forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda):

#recuadro2{
border-radius: 20px 40px 60px 80px;
background-color:#aa0;
width:200px;
padding:10px;
margin-top:10px;
}
border-radius