
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
yborder-top-right-radius
. - La página de propiedades
border
y otras propiedades que establezca son:border-style
yborder-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 izquierdoborder-left
.
- Característica Box Sizing en CSS
- Característica del Margin en CSS
- Diferencias entre SASS y SCSS
- Característica del Padding en CSS
- Característica de Opacity en CSS
- Característica del Overflow en CSS
- Característica del Color en el CSS
- Característica del Background en CSS
- Característica de Border en CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Características padding en CSS
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Propiedad clear en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Propiedades float en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica background-position en CSS
- Característica box-shadow en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Características border-image-width en CSS
- Características border-left en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Características border-right-color en CSS