Características border-radius en CSS

La propiedad border-radius en CSS permite a los desarrolladores web definir cómo rotar las esquinas del marco, y puede especificar un valor para redondear las esquinas o dos valores para hacerlas elipse.

Funciones border-radius css

Valor inicial	Para cada valor corto: border-top-left-radius: `0` border-top-right-radius: `0` border-top-left-radius: `0` border-top-right-radius: `0`
Aplicado a	Todos los artículos.
Heredable	No
Móvil	Sí
Porcentajes	Un porcentaje de la dimensión correspondiente al valor del marco del elemento.
Valor calculado	Para cada valor corto: border-top-left-radius: `<length>` dos o más porcentajes `<percentage>`. border-top-right-radius: `<length>` dos o más porcentajes `<percentage>`. border-top-left-radius: `<length>`dos o más porcentajes `<percentage>`. border-top-right-radius: `<length>` dos o más porcentajes `<percentage>`.

/* Establecer la rotación de todas las esquinas juntas */ 
border-radius :  10px;
/* arriba a la izquierda y abajo a la derecha | arriba a la derecha y abajo a la izquierda */ 
border-radius :  10px  5%;
/* arriba a la izquierda | arriba a la derecha y abajo a la izquierda | abajo a la derecha */ 
border-radius :  2px  4px  2px;
/* arriba a la izquierda | arriba a la derecha | abajo a la derecha | parte inferior izquierda */ 
border-radius :  1px  0  3px  4px;
/* Se pueden establecer dos valores juntos para la rotación, uno para establecer el radio mayor de la elipse y otro para establecer el radio menor de la elipse. */ 
/* (valores del primer radio) / radio */ 
border-radius :  10px  5%  /  20px;
/* (valores del primer radio) / top-left-and-bottom-right | arriba a la derecha y abajo a la izquierda */ 
border-radius :  10px  5%  /  20px  30px;
/* (valores del primer radio) / arriba a la izquierda | arriba a la derecha y abajo a la izquierda | abajo a la derecha */ 
border-radius :  10px  5px  2em  /  20px  25px  30%;
/* (valores del primer radio) / arriba a la izquierda | arriba a la derecha | abajo a la derecha | abajo a la izquierda */ 
border-radius :  10px  5%  /  20px  25em  30px  35em;
/* valores globales */ 
border-radius: inherit;

La esquina puede ser redonda o puede ser elipse según el valor asignado a esta propiedad, y si el valor es igual 0, la esquina no se redondea. La propiedad no se aplicará border-radius a los elementos de la tabla si el valor de la propiedad se border-collapse establece en collapse.

El fondo background(ya sea una imagen o un color) se recortará en el marco (incluso si se gira), pero la ubicación exacta del recorte estará definida por el valor de la propiedad background-clip. Tenga en cuenta que el recorte se llevará a cabo incluso si no hay un marco visible para el elemento.

Al igual que con todas las propiedades cortas, los valores singulares no se pueden heredar, como en border-radius:0 0 inherit inherit, y luego las propiedades largas deben usarse por separado.

Ejemplos y aplicaciones en código

Un ejemplo del uso de un solo valor para especificar la rotación de todas las esquinas de los <div> siguientes elementos, uno de los cuales es el ancho y el largo de uno, y el otro es un rectángulo:

<div class="square border-radius-50">border-radius: 50%</div>
<div class="rectangle border-radius-50">border-radius: 50%</div>

Código CSS:

div {
  background-color: salmon;
  padding: 1em;
  margin: 1em;
  text-align: center;
  color: white;
  line-height: 12em;
  height: 12em;
}
.square {
  width: 12em;
}
.rectangle {
  width: 8em;
}
.border-radius-50 {
  border-radius: 50%;
}

Un ejemplo de rotación de las esquinas de un elemento con un marco seleccionado border:

< div > Marco grueso con marco giratorio </ div >

Código CSS:

div {
  background-color: salmon;
  color: white;
  padding: 2em;
  margin: 2em;
  border: thick solid #006699;
  border-radius: 20px;
}

En el siguiente ejemplo, usaremos la propiedad border-radius con cuatro valores para darle al elemento la <div> forma de la letra D, recuerde que el primer valor representa la esquina superior izquierda, el segundo valor es la esquina superior derecha, el tercer valor es la esquina inferior derecha, y el cuarto valor es la esquina inferior izquierda:

< div > D El borde será curvo </ div >

Código CSS:

div {
  padding: 2em;
  margin: 2em;
  border: solid 10px;
  border-radius: 10px 40px 40px 10px;
}

Un ejemplo del uso de ocho valores con la propiedad border-radius para rotar esquinas como una elipse:

< div > radio del borde: 10px 40px 40px 10px / 45px 10px 10px 45px; </ div >

Código CSS:

div {
  padding: 2em;
  margin: 2em;
  border: solid 10px;
  border-radius: 10px 45px 45px 10px / 45px 10px 10px 45px;
}

Soporte de navegadores

Característica	Chrome	Firefox	IE	Ópera	Safari
Soporte básico	5	4	9	11,5	5

Características generales

La propiedad se define de la border-radius siguiente manera:

Uno, dos, tres o cuatro valores <length> o porcentajes longitudinales <percentage>, con el fin de determinar un solo radio de las esquinas.
Lo anterior puede ir seguido /de un tipo de letra y seguido de uno, dos, tres o cuatro valores de longitud <length> o porcentajes <percentage>, para especificar un radio de rotación menor para obtener esquinas redondeadas en forma de elipse.

A continuación, se muestra un desglose de cuántos valores acepta esta propiedad:

Cuando se especifica un solo valor, se aplicará a todas las esquinas.
Cuando se especifican dos valores, el primer valor es el radio aplicado a las esquinas superior izquierda e inferior derecha, y el segundo valor a las esquinas superior derecha e inferior izquierda.
En cuando se especifican tres valores, el primer valor se aplicará a la esquina superior izquierda, el segundo valor a las esquinas superior derecha e inferior izquierda y el tercer valor a la esquina inferior derecha.
Cuando se seleccionan cuatro valores, los valores se aplicarán a la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y la esquina inferior izquierda respectivamente y en orden (es decir, comenzamos desde la esquina superior izquierda y luego giramos en el sentido de las agujas del reloj ).

Y si usamos la línea en cursiva, la /propiedad aceptará border-radius ocho valores, y estará antes de la línea en cursiva como explicamos anteriormente, y después de ella, se especifica el radio secundario (vertical) de la elipse, y acepta uno, dos , tres o cuatro valores, que es similar a lo que explicamos anteriormente en el pedido.

Lo anterior se puede ilustrar con ejemplos:

border-radius: 1em/5em;
/* La regla anterior es equivalente a la siguiente */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

Otro ejemplo:

border-radius: 4px 3px 6px / 2px 4px;
/* La regla anterior es equivalente a la siguiente */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

<length> o <percentage>

Especifica la longitud de los radios del círculo o los radios mayor y menor en una elipse, las longitudes absolutas se pueden usar según lo permita el tipo de datos <length>, porcentajes de radio mayor (horizontal) en relación con el ancho de la caja del objeto, porcentajes de radio menor (vertical) en relación con la altura de la caja elemento. No se pueden utilizar valores negativos.

Estructura border-radius css

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]? ;

dónde:

<length-percentage> = <length> | <percentage>

Consulte también

Las otras propiedades que controlan las esquinas redondeadas border-radius son: border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius y border-top-right-radius.
La página de propiedades border y otras propiedades que establezca son: border-style y border-color.
La página de propiedades que establece partes del marco: marco superior border-top, border-bottom marco inferior, border-right marco derecho y marco izquierdo border-left.