diff --git a/files/es/web/css/border-radius/index.md b/files/es/web/css/border-radius/index.md new file mode 100644 index 00000000000000..f90601a47d8986 --- /dev/null +++ b/files/es/web/css/border-radius/index.md @@ -0,0 +1,309 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +l10n: + sourceCommit: 4e508e2f543c0d77c9c04f406ebc8e9db7e965be +--- + +{{CSSRef}} + +La propiedad **`border-radius`** [CSS](/es/docs/Web/CSS) redondea las esquinas del borde exterior de un elemento. Puedes establecer un único radio para crear esquinas circulares o dos radios para crear esquinas elípticas. + +{{EmbedInteractiveExample("pages/css/border-radius.html")}} + +El radio se aplica a todo el {{cssxref("background")}}, incluso si el elemento no tiene borde; la posición exacta del recorte se define con la propiedad {{cssxref("background-clip")}}. + +La propiedad `border-radius` no se aplica a los elementos de tabla cuando {{cssxref("border-collapse")}} es `collapse`. + +> [!NOTE] +> Como ocurre con cualquier propiedad abreviada, las subpropiedades individuales no pueden heredar, como en `border-radius:0 0 inherit inherit`, lo que sobrescribiría parcialmente definiciones existentes. En su lugar, se deben usar las propiedades individuales en su forma larga. + +## Propiedades constituyentes + +Esta propiedad es una abreviatura de las siguientes propiedades CSS: + +- [`border-top-left-radius`](/es/docs/Web/CSS/border-top-left-radius) +- [`border-top-right-radius`](/es/docs/Web/CSS/border-top-right-radius) +- [`border-bottom-right-radius`](/es/docs/Web/CSS/border-bottom-right-radius) +- [`border-bottom-left-radius`](/es/docs/Web/CSS/border-bottom-left-radius) + +## Sintaxis + +```css +/* La sintaxis del primer radio permite uno a cuatro valores */ +/* Radio para los 4 lados */ +border-radius: 10px; + +/* esquina-superior-izquierda-e-inferior-derecha | esquina-superior-derecha-e-inferior-izquierda */ +border-radius: 10px 5%; + +/* esquina-superior-izquierda | esquina-superior-derecha-e-inferior-izquierda | esquina-inferior-derecha */ +border-radius: 2px 4px 2px; + +/* esquina-superior-izquierda | esquina-superior-derecha | esquina-inferior-derecha | esquina-inferior-izquierda */ +border-radius: 1px 0 3px 4px; + +/* La sintaxis del segundo radio permite uno a cuatro valores */ +/* (valores del primer radio) / radio */ +border-radius: 10px / 20px; + +/* (valores del primer radio) / esquina-superior-izquierda-e-inferior-derecha | esquina-superior-derecha-e-inferior-izquierda */ +border-radius: 10px 5% / 20px 30px; + +/* (valores del primer radio) / esquina-superior-izquierda | esquina-superior-derecha-e-inferior-izquierda | esquina-inferior-derecha */ +border-radius: 10px 5px 2em / 20px 25px 30%; + +/* (valores del primer radio) / esquina-superior-izquierda | esquina-superior-derecha | esquina-inferior-derecha | esquina-inferior-izquierda */ +border-radius: 10px 5% / 20px 25em 30px 35em; + +/* Valores globales */ +border-radius: inherit; +border-radius: initial; +border-radius: revert; +border-radius: revert-layer; +border-radius: unset; +``` + +La propiedad `border-radius` se especifica como: + +- uno, dos, tres o cuatro valores {{cssxref("<length>")}} o {{cssxref("<percentage>")}}. Esto se utiliza para establecer un único radio en las esquinas. +- opcionalmente seguido por "/" y uno, dos, tres o cuatro valores `` o ``. Esto se usa para establecer un radio adicional, permitiendo esquinas elípticas. + +### Valores + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
radioUn rectángulo azul claro con un borde gris claro. Las 4 esquinas están redondeadas. + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que indica un radio a usar + para el borde en cada esquina. Se usa solo en la + sintaxis de un valor. +
esquina-superior-izquierda-y-esquina-inferior-derecha + Un rectángulo azul claro con un borde gris claro. Las 2 esquinas en la parte superior izquierda y la inferior derecha están redondeadas. + + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que indica + un radio a usar para el borde en las esquinas + superior izquierda e inferior derecha del + cuadro del elemento. Se usa solo en la + sintaxis de dos valores. +
esquina-superior-derecha-y-esquina-inferior-izquierda + Un rectángulo azul claro con un borde gris claro. Las 2 esquinas en la parte superior derecha y la inferior izquierda están redondeadas. + + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que indica un radio + a usar para el borde en las esquinas superior derecha + e inferior izquierda del cuadro del elemento. + Se usa solo en las sintaxis de dos y tres valores. +
esquina-superior-izquierdaUn rectángulo azul claro con un borde gris claro. La esquina superior izquierda está redondeada. + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que indica un radio + a usar para el borde en la esquina superior + izquierda del cuadro del elemento. Se usa solo + en las sintaxis de tres y cuatro valores. +
esquina-superior-derechaUn rectángulo azul claro con un borde gris claro. La esquina superior derecha está redondeada. + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que indica un + radio a usar para el borde en la esquina superior + derecha del cuadro del elemento. Se usa solo + en la sintaxis de cuatro valores. +
esquina-inferior-derechaUn rectángulo azul claro con un borde gris claro. La esquina inferior derecha está redondeada. + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que + indica un radio a usar para el borde en + la esquina inferior derecha del cuadro + del elemento. Se usa solo en las sintaxis + de tres y cuatro valores. +
esquina-inferior-izquierdaUn rectángulo azul claro con un borde gris claro. La esquina inferior izquierda está redondeada. + Es un {{cssxref("<length>")}} o un + {{cssxref("<percentage>")}} que indica + un radio a usar para el borde en la esquina + inferior izquierda del cuadro del elemento. + Se usa solo en la sintaxis de cuatro valores. +
+ +- {{cssxref("<length>")}} + - : Indica el tamaño del radio del círculo o de los ejes mayor y menor de la elipse, utilizando valores de longitud. Los valores negativos no son válidos. +- {{cssxref("<percentage>")}} + - : Indica el tamaño del radio del círculo o de los ejes mayor y menor de la elipse, utilizando valores porcentuales. Los porcentajes para el eje horizontal se refieren al ancho del cuadro; los porcentajes para el eje vertical se refieren a la altura del cuadro. Los valores negativos no son válidos. + +Por ejemplo: + +```css +border-radius: 1em/5em; + +/* Es equivalente a: */ +border-top-left-radius: 1em 5em; +border-top-right-radius: 1em 5em; +border-bottom-right-radius: 1em 5em; +border-bottom-left-radius: 1em 5em; +``` + +```css +border-radius: 4px 3px 6px / 2px 4px; + +/* Es equivalente a: */ +border-top-left-radius: 4px 2px; +border-top-right-radius: 3px 4px; +border-bottom-right-radius: 6px 2px; +border-bottom-left-radius: 3px 4px; +``` + +## Definición formal + +{{CSSInfo}} + +## Syntaxis formal + +{{csssyntax}} + +## Ejemplos + +```html hidden +
+  border: solid 10px;
+  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;
+  background: gold;
+
+ +
+  border: none;
+  border-radius: 50%;
+  background: burlywood;
+
+ +
+  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
+  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+``` + +```css hidden +pre { + margin: 20px; + padding: 20px; + width: 80%; + height: 80px; +} + +pre#example-1 { + border: solid 10px; + border-radius: 10px 40px 40px 10px; +} + +pre#example-2 { + border: groove 1em red; + border-radius: 2em; +} + +pre#example-3 { + background: gold; + border: ridge gold; + border-radius: 13em/3em; +} + +pre#example-4 { + border: none; + border-radius: 40px 10px; + background: gold; +} + +pre#example-5 { + border: none; + border-radius: 50%; + background: burlywood; +} + +pre#example-6 { + border: dotted; + border-width: 10px 4px; + border-radius: 10px 40px; +} + +pre#example-7 { + border: dashed; + border-width: 2px 4px; + border-radius: 40px; +} +``` + +{{EmbedLiveSample("Examples", "200", "1150")}} + +### Ejemplos interactivos + +- Ejemplo 1: +- Ejemplo 2: +- Ejemplo 3: +- Ejemplo 4: +- Ejemplo 5: + +## Especificaciones + +{{Specifications}} + +## Compatibilidad con los navegadores + +{{Compat}} + +## Véase también + +- Propiedades relacionadas con border-radius: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-start-start-radius")}}, {{cssxref("border-start-end-radius")}}, {{cssxref("border-end-start-radius")}}, {{cssxref("border-end-end-radius")}}