`](/es/docs/Web/CSS/background$edit#%3Cbackground-color%3E) sólo puede ser incluido en la última capa especificada.
+
+## Valores
+
+- background-color
+ - : ver [`color`](/es/CSS/background-color).
+- background-image
+ - : ver [`image`](/es/CSS/background-image).
+- background-repeat
+ - : ver [`repeat`](/es/CSS/background-repeat).
+- background-attachment
+ - : ver [`background-attachment`](/es/CSS/background-attachment).
+- background-position
+ - : ver [`position`](/es/CSS/background-position).
+
+## Ejemplos
+
+### HTML
+
+```html
+
+ Starry sky
+ Twinkle twinkle
+ Starry sky
+
+Here is a paragraph
+```
+
+### CSS
+
+```css
+.warning {
+ background: red;
+}
+
+.topbanner {
+ background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+```
+
+### Result
+
+{{EmbedLiveSample("Ejemplos")}}
+
+## Notas
+
+Tomando una declaración válida, la propiedad `background` inicia las propiedades individuales a sus valores iniciales para después asignarles los valores especificadas explícitamente en la declaración. No hay que definir un valor por cada propiedad individual, se cambia solo las que necesitamos en relación al valor por defecto.
+
+## Especificaciones
+
+- [CSS 1](http://www.w3.org/TR/CSS1#background)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/colors.html#propdef-background)
+- [CSS 3](http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-background)
+
+## Compatibilidad de navegadores
+
+| Navegador | Mínima versión |
+| ----------------- | -------------- |
+| Internet Explorer | 4 |
+| Firefox | 1 |
+| Netscape | 6 |
+| Opera | 3.5 |
+
+## Ver también
+
+{{ Cssxref("background") }}, {{ Cssxref("background-attachment") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}
diff --git a/files/es/web/css/basic-shape/index.html b/files/es/web/css/basic-shape/index.html
deleted file mode 100644
index 08f0b59ad8aa80..00000000000000
--- a/files/es/web/css/basic-shape/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title:
-slug: Web/CSS/basic-shape
-tags:
- - CSS
- - Referencia
- - Tipo de Dato CSS
-translation_of: Web/CSS/basic-shape
----
-{{CSSRef}}
-
-Resumen
-
-El tipo <basic-shape>
puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores <basic-shape>
. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.
-
-Figuras posibles
-
-Las siguientes figuras son soportadas. Todos los valores <basic-shape>
usan notación funcional y son definidos aquí usando la sintaxis de definición de valor .
-
-
- inset()
-
- inset( <shape-arg>{1,4} [round <border-radius>]? )
-
- Define un rectángulo incrustado.
-
- Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.
-
- Los argumentos opcionales <border-radius>
definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.
-
- Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.
-
- polygon()
-
- polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
-
- <fill-rule>
representa la regla de llenado usada para determinar el área interior del polígono. Los valores posibles son nonzero
y evenodd
. El valor predeterminado es nonzero
.
-
- Cada elemento par de la lista representa xi y yi - las coordenadas del eje x y el eje y en el vértice i del polígono.
-
- circle(
)
-
- circle( [<shape-radius>]? [at <position>]? )
-
- El argumento <shape-radius>
representa a r , el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como sqrt(width^2+height^2)/sqrt(2)
.
-
- El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es center
.
-
- ellipse()
-
- ellipse( [<shape-radius>{2}]? [at <position>]? )
-
- El argumento <shape-radius>
representa a rx y ry , los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para rx ) y altura (para ry ) presentes en la caja de referencia.
-
- El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es center
.
-
-
-
-Los argumentos no definidos arriba son definidos de esta forma:
-
-<shape-arg> = <length> | <percentage>
-<shape-radius> = <length> | <percentage> | closest-side | farthest-side
-
-Define un radio para un círculo o elipse. Su valor predeterminado es closest-side
.
-
-closest-side
usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.
-
-farthest-side
use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.
-
-Valores Calculados de Figuras Básicas
-
-Los valores en una función <basic-shape>
son calculados segun se especifica, con estas excepciones:
-
-
- Valores omitidos son incluidos y calculados acorde a su valor predeterminado.
- Un valor {{cssxref("<position>")}} en circle()
o ellipse()
es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.
- Un valor <border-radius>
en inset()
es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.
-
-
-Interpolación de Figuras Básicas
-
-Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener nonzero
en la misma posición en ambas listas), sí se interpolan esos valores.
-
-
-
-
- Ambas figuras deben usar la misma figura de referencia.
- Si ambas figuras son del mismo tipo, ellipse()
o circle()
, y ninguno de los radios usa las palabras clave closest-side
o farthest-side
keywords, se interpola entre cada valor de las funciones de figura.
- Si ambas figuras son de tipo inset()
, se interpola entre cada valor de las funciones de figura.
- Si ambas figuras son de tipo polygon()
, ambos polígonos tienen el mismo número de vértices y usan la misma regla <fill-rule>
, se interpola entre cada valor de la función de figura.
- En cualquier otro casa no se especifica la interpolación.
-
-
-Ejemplos
-
-TODO
-
-Especificaciones
-
-
-
-
- Especificicación
- Estatus
- Comentarios
-
-
-
-
- {{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}
- {{ Spec2('CSS Shapes') }}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.types.basic-shape")}}
-
-Véase también
-
-
- {{cssxref("clip-path")}}
- {{cssxref("shape-outside")}}
-
diff --git a/files/es/web/css/basic-shape/index.md b/files/es/web/css/basic-shape/index.md
new file mode 100644
index 00000000000000..f72e70e9a3a249
--- /dev/null
+++ b/files/es/web/css/basic-shape/index.md
@@ -0,0 +1,122 @@
+---
+title:
+slug: Web/CSS/basic-shape
+tags:
+ - CSS
+ - Referencia
+ - Tipo de Dato CSS
+translation_of: Web/CSS/basic-shape
+---
+{{CSSRef}}
+
+## Resumen
+
+El tipo **``** puede ser especificado usando funciones de figura (shape) básicas. Al usar esta sintaxis para definir figuras, la caja de referencia es definida por cada propiedad que usa valores ``. El sistema de coordenadas para la figura tiene su origen en la esquina superior izquierda de la caja de referencia, con el eje x corriendo hacia la derecha y el eje y, hacia abajo. Todas las longitudes expresadas en porcentajes son resueltas con base en las dimensiones de la caja de referencia.
+
+## Figuras posibles
+
+Las siguientes figuras son soportadas. Todos los valores `` usan notación funcional y son definidos aquí usando la [sintaxis de definición de valor](/es/docs/Web/CSS/Sintaxis_definición_de_valor).
+
+- `inset()`
+
+ - :
+
+ ```
+ inset( {1,4} [round ]? )
+ ```
+
+ Define un rectángulo incrustado.
+
+ Cuando se proporcionan los cuatro primeros argumentos, representan la separación superior, derecha, inferior e izquierda del interior de la caja de referencia que define las posiciones de los bordes del rectángulo interior. Estos argumentos siguen la sintaxis de la abreviatura de margen, que permite definir los cuatro valores en uno, dos o cuatro valores.
+
+ Los argumentos opcionales [``](/es/docs/Web/CSS/border-radius) definen esquinas redondeadas para el rectángulo incrustado usando la sintaxis de abreviatura de border-radius.
+
+ Cuando un par de valores inset en cualquier dimensión suman un valor mayor al límite de la dimensión disponible (como por ejemplo, que los valores inset izquierdo y derecho sean de 75% cada uno), se está definiendo una figura que no encierra ningun área. Para esta especificación, el resultado es un área flotante vacía.
+
+- `polygon()`
+
+ - :
+
+ ```
+ polygon( [,]? [ ]# )
+ ```
+
+ `` representa la [regla de llenado](/es/docs/Web/SVG/Attribute/fill-rule) usada para determinar el área interior del polígono. Los valores posibles son `nonzero` y `evenodd`. El valor predeterminado es `nonzero`.
+
+ Cada elemento par de la lista representa _xi_ y _yi_ - las coordenadas del eje x y el eje y en el vértice _i_ del polígono.
+
+- `circle(`)
+
+ - :
+
+ ```
+ circle( []? [at ]? )
+ ```
+
+ El argumento `` representa a _r_, el radio del círculo. Los valores negativos son inválidos. Un valor en porcentaje es resuelto de la anchura y altura presentes de la caja de referencia como `sqrt(width^2+height^2)/sqrt(2)`.
+
+ El argumento {{cssxref("<position>")}} define el centro del círculo. Su valor predeterminado es `center`.
+
+- `ellipse()`
+
+ - :
+
+ ```
+ ellipse( [{2}]? [at ]? )
+ ```
+
+ El argumento `` representa a rx y ry, los radios del eje x y del eje y de la elipse, en ese orden. Los valores negativos son inválidos. Los valores en porcentaje son resueltos contra la anchura (para rx) y altura (para ry) presentes en la caja de referencia.
+
+ El argumento {{cssxref("<position>")}} define el centro de la elipse. Su valor predeterminado es `center`.
+
+Los argumentos no definidos arriba son definidos de esta forma:
+
+```
+ = |
+ = | | closest-side | farthest-side
+```
+
+Define un radio para un círculo o elipse. Su valor predeterminado es `closest-side`.
+
+`closest-side` usa la longitud desde el centro de la figura hasta el borde más cercano de la caja de referencia. Para círculos, es el lado más cercano en cualquier dimensión. Para elipses, es el lado más cercano en la dimensión del radio.
+
+`farthest-side` use la longitud desde el centro de la figura hasta el lado más alejado de la caja de referencia. Para círculos, es el lado más alejado en cualquier dimensión. Para elipses, es el lado más alejado en la dimensión del radio.
+
+## Valores Calculados de Figuras Básicas
+
+Los valores en una función `` son calculados segun se especifica, con estas excepciones:
+
+- Valores omitidos son incluidos y calculados acorde a su valor predeterminado.
+- Un valor {{cssxref("<position>")}} en `circle()` o `ellipse()` es calculado como un par de separaciones (horizontal y después vertical) desde el origen superior izquierdo, cada uno dado como combinación de una longitud absoluta y un porcentaje.
+- Un valor [``](/es/docs/Web/CSS/border-radius) en `inset()` es calculado como una lista expandida de ocho valores {{cssxref("length")}} o de porcentaje.
+
+## Interpolación de Figuras Básicas
+
+Para interpolar dos figuras, se aplican las reglas a continuación. Los valores en la función de figura se interpolan como una lista simple. La lista de valores se interpola como {{cssxref("length", "length")}}, {{cssxref("percentage", "percentage")}}, o {{cssxref("calc", "calc")}} donde sea posible. Si los valores listados no son de los de esos tipos pero son idénticos (por ejemplo, tener `nonzero` en la misma posición en ambas listas), sí se interpolan esos valores.
+
+- Ambas figuras deben usar la misma figura de referencia.
+- Si ambas figuras son del mismo tipo, `ellipse()` o `circle()`, y ninguno de los radios usa las palabras clave `closest-side` o `farthest-side` keywords, se interpola entre cada valor de las funciones de figura.
+- Si ambas figuras son de tipo `inset()`, se interpola entre cada valor de las funciones de figura.
+- Si ambas figuras son de tipo `polygon()`, ambos polígonos tienen el mismo número de vértices y usan la misma regla [``](/es/docs/Web/SVG/Attribute/fill-rule), se interpola entre cada valor de la función de figura.
+- En cualquier otro casa no se especifica la interpolación.
+
+## Ejemplos
+
+```
+TODO
+```
+
+## Especificaciones
+
+| Especificicación | Estatus | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------------ |
+| {{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }} | {{ Spec2('CSS Shapes') }} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.types.basic-shape")}}
+
+## Véase también
+
+- `{{cssxref("clip-path")}}`
+- `{{cssxref("shape-outside")}}`
diff --git a/files/es/web/css/blend-mode/index.html b/files/es/web/css/blend-mode/index.html
deleted file mode 100644
index 7a11a9330c6749..00000000000000
--- a/files/es/web/css/blend-mode/index.html
+++ /dev/null
@@ -1,353 +0,0 @@
----
-title:
-slug: Web/CSS/blend-mode
-tags:
- - Composición
- - Composición CSS
- - Modos de mezcla
- - Referencia
- - Tipo de Dato CSS
-translation_of: Web/CSS/blend-mode
----
-{{CSSRef}}
-
-Resumen
-
-El tipo <blend-mode>
es una coleccion de palabras clave que describen modos de mezcla.
-
-Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.
-
-Sintaxis
-
-Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
-
-Valores posibles
-
-
- normal
-
- El color final es el de la capa superior, sin importar el color de fondo.
- El efecto es similar a dos trozos de papel sobrepuestos.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: normal;
-}
-
-
- {{ EmbedLiveSample('normal', "300", "300") }}
-
- multiply
-
- El color final es el resultado de multiplicar el color superior y el inferior.
- Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
- El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: multiply;
-}
-
-
- {{ EmbedLiveSample('multiply', "300", "300") }}
-
- screen
-
- El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
- Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
- El efecto es similar a dos imágenes mostrándose desde un proyector.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: screen;
-}
-
-
- {{ EmbedLiveSample('screen', "300", "300") }}
-
- overlay
- El color final es el resultado de multiply
si el color inferior es más oscuro, o screen
si el color inferior es más claro.
- Este modo de mezcla es equivalente a hard-light
, pero si las capas son intercambiadas.
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: overlay;
-}
-
-
- {{ EmbedLiveSample('overlay', "300", "300") }}
-
- darken
-
- El resultado final es un color compuesto de los valores más oscuros por cada canal de color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: darken;
-}
-
-
- {{ EmbedLiveSample('darken', "300", "300") }}
-
- lighten
-
- El resultado final es un color compuesto de los valores más claros por cada canal de color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: lighten;
-}
-
-
- {{ EmbedLiveSample('lighten', "300", "300") }}
-
- color-dodge
-
- El color final es el resultado de dividir el color inferior por el inverso del color superior.
- Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
- Este modo de mezcla es similar a screen
, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: color-dodge;
-}
-
-
- {{ EmbedLiveSample('color-dodge', "300", "300") }}
-
- color-burn
-
- El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
- Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
- Este modo de mezcla es similar a multiply
, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: color-burn;
-}
-
-
- {{ EmbedLiveSample('color-burn', "300", "300") }}
-
- hard-light
-
- El color final es el resultado de multiply
si el color superior es más oscuro, o screen
si el color superior es más oscuro.
- Este modo de mezcla es equivalente a overlay
, pero con las capas intercambiadas.
- El efecto es similar a encender un foco con mucha intensidad en el fondo.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: hard-light;
-}
-
-
- {{ EmbedLiveSample('hard-light', "300", "300") }}
-
- soft-light
-
- El color final es similar a hard-light
, pero más suave.
- Este modo de mezcla se comporta similar a hard-light
.
- El efecto es similar a encender un foco difuso en el fondo.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: soft-light;
-}
-
-
- {{ EmbedLiveSample('soft-light', "300", "300") }}
-
- difference
-
- El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
- Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: difference;
-}
-
-
- {{ EmbedLiveSample('difference', "300", "300") }}
-
- exclusion
-
- El color final es similar a difference,
pero con menor contraste.
- Así como con difference
, una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: exclusion;
-}
-
-
- {{ EmbedLiveSample('exclusion', "300", "300") }}
-
- hue
-
- El color final tiene el matiz del color superior, mientras usa la saturación y luminosidad del color inferior.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: hue;
-}
-
-
- {{ EmbedLiveSample('hue', "300", "300") }}
-
- saturation
-
- El color final tiene la saturación del color superior, mientras usa el matiz y luminosidad del color inferior.
- Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: saturation;
-}
-
-
- {{ EmbedLiveSample('saturation', "300", "300") }}
-
- color
-
- El color final tiene el matiz y saturación del color superior, mientras usa la luminosidad del color inferior.
- El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: color;
-}
-
-
- {{ EmbedLiveSample('color', "300", "300") }}
-
- luminosity
-
- El color final tiene la luminosidad del color superior, mientras usa el matiz y saturación del color inferior.
- Este modo de mezcla es equivalente a color
, pero con las capas intercambiadas.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: luminosity;
-}
-
-
- {{ EmbedLiveSample('luminosity', "300", "300") }}
-
-
-
-Interpolación de modos de mezcla
-
-
-
-Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}
- {{ Spec2('Compositing') }}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.types.blend-mode")}}
-
-Véase también
-
-
- Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}
- Blend modes
- Índice de Referencia CSS
-
diff --git a/files/es/web/css/blend-mode/index.md b/files/es/web/css/blend-mode/index.md
new file mode 100644
index 00000000000000..801bfc0539e2cd
--- /dev/null
+++ b/files/es/web/css/blend-mode/index.md
@@ -0,0 +1,438 @@
+---
+title:
+slug: Web/CSS/blend-mode
+tags:
+ - Composición
+ - Composición CSS
+ - Modos de mezcla
+ - Referencia
+ - Tipo de Dato CSS
+translation_of: Web/CSS/blend-mode
+---
+{{CSSRef}}
+
+## Resumen
+
+El tipo **``** es una coleccion de palabras clave que describen modos de mezcla.
+
+Un modo de mezcla (blend mode) es un método para calcular el color final de un píxel cuando hay dos capas superpuestas. Cada modo de mezcla toma el valor del color de primer plano y el de fondo (color superior y color inferior, respectivamente), realiza su cálculo y devuelve el valor de color. La capa final visible es el resultado de realizar el cálculo del modo de mezcla en cada pixel sobrepuesto entre las capas mezcladas.
+
+## Sintaxis
+
+```
+Sintaxis formal: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+```
+
+### Valores posibles
+
+- `normal`
+
+ - : El color final es el de la capa superior, sin importar el color de fondo.
+
+ El efecto es similar a dos trozos de papel sobrepuestos.
+
+- `multiply`
+
+ - : El color final es el resultado de multiplicar el color superior y el inferior.
+
+ Una capa negra conduce a una capa final negra, y una capa blanca lleva a que no haya cambios.
+
+ El efecto ese similar a dos imágenes impresas en papel transparente sobrepuestas.
+
+- `screen`
+
+ - : El color final ees el resultado de invertir los colores, multiplicándolos e invirtiendo el valor resultante.
+
+ Una capa negra no produce cambio alguno, y una capa blanca conduce a una capa blanca final.
+
+ El efecto es similar a dos imágenes mostrándose desde un proyector.
+
+- `overlay`
+
+ - : El color final es el resultado de `multiply` si el color inferior es más oscuro, o `screen` si el color inferior es más claro.
+
+ Este modo de mezcla es equivalente a `hard-light`, pero si las capas son intercambiadas.
+
+- `darken`
+
+ - : El resultado final es un color compuesto de los valores más oscuros por cada canal de color.
+
+- `lighten`
+
+ - : El resultado final es un color compuesto de los valores más claros por cada canal de color.
+
+- `color-dodge`
+
+ - : El color final es el resultado de dividir el color inferior por el inverso del color superior.
+
+ Un fondo negro no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce un color completamente iluminado.
+
+ Este modo de mezcla es similar a `screen`, pero basta con que el color de primer plano sea tan claro como el inverso del color de fondo para alcanzar un color completamente iluminado.
+
+- `color-burn`
+
+ - : El color final es el resultado de invertir el color de fondo, dividier el valor por el color superior, e invertir ese valor.
+
+ Un fondo blanco no produce cambio alguno. Un color de primer plano con el color invertido del fondo produce una imagen negra.
+
+ Este modo de mezcla es similar a `multiply`, pero basta con que el color de primer plano sea tan oscuro como el inverso del color de fondo para dar como resultado una imagen negra.
+
+- `hard-light`
+
+ - : El color final es el resultado de `multiply` si el color superior es más oscuro, o `screen` si el color superior es más oscuro.
+
+ Este modo de mezcla es equivalente a `overlay`, pero con las capas intercambiadas.
+
+ El efecto es similar a encender un foco con mucha _intensidad_ en el fondo.
+
+- `soft-light`
+
+ - : El color final es similar a `hard-light`, pero más suave.
+
+ Este modo de mezcla se comporta similar a `hard-light`.
+
+ El efecto es similar a encender un foco _difuso_ en el fondo.
+
+- `difference`
+
+ - : El color final es elresultado de restar el color más oscuro de las dos capas, del más claro.
+
+ Una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.
+
+- `exclusion`
+
+ - : El color final es similar a `difference,` pero con menor contraste.
+
+ Así como con `difference`, una capa negra no produce efecto alguno, mientras una capa blanca invierte el color de la otra capa.
+
+- `hue`
+
+ - : El color final tiene el _matiz_ del color superior, mientras usa la _saturación_ y _luminosidad_ del color inferior.
+
+- `saturation`
+
+ - : El color final tiene la _saturación_ del color superior, mientras usa el _matiz_ y _luminosidad_ del color inferior.
+
+ Un fondo gris puro, que no tenga saturación, no producirá efecto alguno.
+
+- `color`
+
+ - : El color final tiene el **matiz** y **saturación** del color superior, mientras usa la _luminosidad_ del color inferior.
+
+ El efecto preserva los niveles de grid y puede ser usado para colorear el primer plano.
+
+- `luminosity`
+
+ - : El color final tiene la _luminosidad_ del color superior, mientras usa el _matiz_ y _saturación_ del color inferior.
+
+ Este modo de mezcla es equivalente a `color`, pero con las capas intercambiadas.
+
+## Ejemplos
+
+### Ejemplo usando `normal`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: normal;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `multiply`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: multiply;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `screen`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: screen;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `overlay`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: overlay;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `darken`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: darken;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `lighten`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: lighten;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `color-dodge`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: color-dodge;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `color-burn`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: color-burn;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `hard-light`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: hard-light;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `soft-light`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: soft-light;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `difference`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: difference;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `exclusion`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: exclusion;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `hue`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: hue;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `saturation`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: saturation;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `color`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: color;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+### Ejemplo usando `luminosity`
+
+```html hidden
+
+```
+
+```css
+#div {
+ width: 300px;
+ height: 300px;
+ background: url('https://mdn.mozillademos.org/files/8543/br.png'),
+ url('https://mdn.mozillademos.org/files/8545/tr.png');
+ background-blend-mode: luminosity;
+}
+```
+
+{{ EmbedLiveSample("", "300", "300") }}
+
+## Interpolación de modos de mezcla
+
+Los cambios entre modos de mezcla no son interpolados. Cualquier cambio ocurrirá abruptamente.
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }} | {{ Spec2('Compositing') }} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.types.blend-mode")}}
+
+## Véase también
+
+- Propiedades que usan valores de este tipo: {{cssxref("background-blend-mode")}} y {{cssxref("mix-blend-mode")}}
+- [Blend modes](http://en.wikipedia.org/wiki/Blend_modes)
+- Índice de [Referencia CSS](/es/docs/CSS/CSS_Reference)
diff --git a/files/es/web/css/block-size/index.html b/files/es/web/css/block-size/index.html
deleted file mode 100644
index 2aac46a8dc913a..00000000000000
--- a/files/es/web/css/block-size/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: block-size
-slug: Web/CSS/block-size
-tags:
- - Experimental
- - Propiedad CSS
- - Propiedad Lógica CSS
- - Referencia
-translation_of: Web/CSS/block-size
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS block-size
CSS define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.
-
-{{EmbedInteractiveExample("pages/css/block-size.html")}}
-
-Resumen
-
-La propiedad de CSS block-size
define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.
-
-Si el modo de escritura está orientado verticalmente, el valor de block-size
se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.
-
-{{cssinfo}}
-
-Sintaxis
-
-/* <length> values */
-block-size: 300px;
-block-size: 25em;
-
-/* <percentage> values */
-block-size: 75%;
-
-/* Keyword values */
-block-size: 25em border-box;
-block-size: 75% content-box;
-block-size: max-content;
-block-size: min-content;
-block-size: available;
-block-size: fit-content;
-block-size: auto;
-
-/* Global values */
-block-size: inherit;
-block-size: initial;
-block-size: unset;
-
-
-Valores
-
-La propiedad block-size
toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<p class="texto">Texto de ejemplo</p>
-
-
-Contenido CSS
-
-.texto {
- writing-mode: vertical-rl;
- background-color: yellow;
- block-size: 200px;
-}
-
-{{EmbedLiveSample("Ejemplo")}}
-
-Especificación
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.block-size")}}
-
-Véase también
-
-
- Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}
- {{cssxref("writing-mode")}}
-
diff --git a/files/es/web/css/block-size/index.md b/files/es/web/css/block-size/index.md
new file mode 100644
index 00000000000000..5d7ff63f201ac6
--- /dev/null
+++ b/files/es/web/css/block-size/index.md
@@ -0,0 +1,91 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+ - Experimental
+ - Propiedad CSS
+ - Propiedad Lógica CSS
+ - Referencia
+translation_of: Web/CSS/block-size
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`block-size`** [CSS](/es/docs/Web/CSS) define el tamaño horizontal o vertical de los elementos en bloque, dependiendo de los modos de escritura. estos corresponden ya sea a la propiedad {{cssxref("width")}} o la propiedad {{cssxref("height")}}, dependiendo de los valores de {{cssxref("writing-mode")}}.
+
+{{EmbedInteractiveExample("pages/css/block-size.html")}}
+
+## Resumen
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`block-size`** define el tamaño horizontal y vertical del bloque de un elemento, dependiendo de su modo de escritura. Corresponde a la propiedad {{cssxref("width")}} o {{cssxref("height")}}, dependiendo del valor definido en {{cssxref("writing-mode")}}.
+
+Si el modo de escritura está orientado verticalmente, el valor de `block-size` se relaciona con la anchura del elemento, de lo contrario, se relaciona con la altura del elemento. Está relacionada con {{cssxref("inline-size")}}, la cual define las otras dimensiones del elemento.
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* values */
+block-size: 300px;
+block-size: 25em;
+
+/* values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+```
+
+### Valores
+
+La propiedad `block-size` toma los mismos valores que las propiedades {{cssxref("width")}} y {{cssxref("height")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+Texto de ejemplo
+```
+
+### Contenido CSS
+
+```css
+.texto {
+ writing-mode: vertical-rl;
+ background-color: yellow;
+ block-size: 200px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo")}}
+
+## Especificación
+
+| Especificación | Estatus | Comentarios |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.block-size")}}
+
+## Véase también
+
+- Las propiedades físicas asignadas: {{cssxref("width")}} y {{cssxref("height")}}
+- {{cssxref("writing-mode")}}
diff --git a/files/es/web/css/border-block-color/index.html b/files/es/web/css/border-block-color/index.html
deleted file mode 100644
index 06de0b103cfa82..00000000000000
--- a/files/es/web/css/border-block-color/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: border-block-color
-slug: Web/CSS/border-block-color
-translation_of: Web/CSS/border-block-color
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-color
define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-border-block-color: yellow;
-border-block-color: #F5F6F7;
-
-
-El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'color'>
- El color del borde. Mirar {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 10px solid blue;
- border-block-color: red;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-color")}}
-
-Mira también
-
-
- Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097
-
diff --git a/files/es/web/css/border-block-color/index.md b/files/es/web/css/border-block-color/index.md
new file mode 100644
index 00000000000000..c352853aa9e30e
--- /dev/null
+++ b/files/es/web/css/border-block-color/index.md
@@ -0,0 +1,71 @@
+---
+title: border-block-color
+slug: Web/CSS/border-block-color
+translation_of: Web/CSS/border-block-color
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-color`** define el color del borde de bloque de un elemento, que se asigna al color del borde físico dependiendo de los elementos de modo de escrituro, direccionalidad y la orientación del texto. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-right-color")}} y {{cssxref("border-left-color")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+border-block-color: yellow;
+border-block-color: #F5F6F7;
+```
+
+El color de borde en la otra dimensión puede ser establecida con {{cssxref("border-inline-color")}} que establece {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'color'>`
+ - : El color del borde. Mirar {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 10px solid blue;
+ border-block-color: red;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-color", "border-block-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-color")}}
+
+## Mira también
+
+- Esta propiedad se asigna a las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ error 1297097
diff --git a/files/es/web/css/border-block-end-color/index.html b/files/es/web/css/border-block-end-color/index.html
deleted file mode 100644
index 01fd86d858570b..00000000000000
--- a/files/es/web/css/border-block-end-color/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: border-block-end-color
-slug: Web/CSS/border-block-end-color
-tags:
- - CSS
- - Experimental
- - Propiedad CSS
- - Propiedad Lógica CSS
- - Referencia
-translation_of: Web/CSS/border-block-end-color
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad CSS border-block-end-color
define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-border-block-end-color: yellow;
-border-block-end-color: #F5F6F7;
-
-
-Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'border-color'>
- Véase {{ cssxref("border-color") }}
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Texto de ejemplo</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 10px solid blue;
- border-block-end-color: red;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial
-
-
-
-
-Compatibilidad en navegadores
-
-{{Compat("css.properties.border-block-end-color")}}
-
-Mira también
-
-
- Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
-
diff --git a/files/es/web/css/border-block-end-color/index.md b/files/es/web/css/border-block-end-color/index.md
new file mode 100644
index 00000000000000..2b2fa49b32fd1f
--- /dev/null
+++ b/files/es/web/css/border-block-end-color/index.md
@@ -0,0 +1,77 @@
+---
+title: border-block-end-color
+slug: Web/CSS/border-block-end-color
+tags:
+ - CSS
+ - Experimental
+ - Propiedad CSS
+ - Propiedad Lógica CSS
+ - Referencia
+translation_of: Web/CSS/border-block-end-color
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad [CSS](/es/docs/Web/CSS) `border-block-end-color` define el color del borde del final lógico de un elemento, que se mapea a un color de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+border-block-end-color: yellow;
+border-block-end-color: #F5F6F7;
+```
+
+Está relacionada con {{cssxref("border-block-start-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen las otras propiedades de color de borde del elemento.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'border-color'>`
+ - : Véase {{ cssxref("border-color") }}
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 10px solid blue;
+ border-block-end-color: red;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-color", "border-block-end-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-end-color")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
diff --git a/files/es/web/css/border-block-end-style/index.html b/files/es/web/css/border-block-end-style/index.html
deleted file mode 100644
index e5a77fcf01064d..00000000000000
--- a/files/es/web/css/border-block-end-style/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: border-block-end-style
-slug: Web/CSS/border-block-end-style
-tags:
- - CSS
- - Experimental
- - Propiedad CSS
- - Propiedad Lógica CSS
- - Referencia
-translation_of: Web/CSS/border-block-end-style
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad CSS border-block-end-style
define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-border-block-end-style: dashed;
-border-block-end-style: dotted;
-border-block-end-style: groove;
-
-
-Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'border-style'>
- See {{ cssxref("border-style") }}
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Texto de ejemplo</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 5px solid blue;
- border-block-end-style: dashed;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-block-end-style")}}
-
-Véase también
-
-
- Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-end-style/index.md b/files/es/web/css/border-block-end-style/index.md
new file mode 100644
index 00000000000000..6434f94d2b5059
--- /dev/null
+++ b/files/es/web/css/border-block-end-style/index.md
@@ -0,0 +1,78 @@
+---
+title: border-block-end-style
+slug: Web/CSS/border-block-end-style
+tags:
+ - CSS
+ - Experimental
+ - Propiedad CSS
+ - Propiedad Lógica CSS
+ - Referencia
+translation_of: Web/CSS/border-block-end-style
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad [CSS](/es/docs/Web/CSS) **`border-block-end-style`** define el estilo del borde del final lógico del bloque de un elemento, que se mapea a un estilo de borde físico, dependiendo el modo de escritura, direccionalidad y orientación de texto del elemento. Corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+border-block-end-style: dashed;
+border-block-end-style: dotted;
+border-block-end-style: groove;
+```
+
+Está relacionada a {{cssxref("border-block-start-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen las otras propiedades de estilos de borde del elemento.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'border-style'>`
+ - : See {{ cssxref("border-style") }}
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 5px solid blue;
+ border-block-end-style: dashed;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estatus | Comentarios |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-style", "border-block-end-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-block-end-style")}}
+
+## Véase también
+
+- Las propiedades físicas mapeadas: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, y {{cssxref("border-left-style")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-end-width/index.html b/files/es/web/css/border-block-end-width/index.html
deleted file mode 100644
index 8af0fea585c5ed..00000000000000
--- a/files/es/web/css/border-block-end-width/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: border-block-end-width
-slug: Web/CSS/border-block-end-width
-translation_of: Web/CSS/border-block-end-width
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propieda de CSS border-block-end-width
define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
-
-
-
-Sintaxis
-
-/* <'border-width'> values */
-border-block-end-width: 5px;
-border-block-end-width: thick;
-
-
-Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-width'>
- El tamaño del borde. Mira {{ cssxref("border-width") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 1px solid blue;
- border-block-end-width: 5px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial
-
-
-
-
-Compatibilidad en Navegadores
-
-
-
-{{Compat("css.properties.border-block-end-width")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-end-width/index.md b/files/es/web/css/border-block-end-width/index.md
new file mode 100644
index 00000000000000..4fa36a6b4aac7a
--- /dev/null
+++ b/files/es/web/css/border-block-end-width/index.md
@@ -0,0 +1,74 @@
+---
+title: border-block-end-width
+slug: Web/CSS/border-block-end-width
+translation_of: Web/CSS/border-block-end-width
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propieda de [CSS](/es/docs/Web/CSS) **`border-block-end-width`** define el ancho del borde final lógico de bloque de un elemento, que se asigna al borde físico que depende del modo de escritura, direccionalidad, y orientación del texto del elemento. Esto corresponde a la propiedad {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} property dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-block-end-width.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-width'> values */
+border-block-end-width: 5px;
+border-block-end-width: thick;
+```
+
+Las propiedades relacionadas son {{cssxref ("border-block-start-width")}}, {{cssxref ("border-inline-width")}}, y {{cssxref ("border-inline-end-width ")}}, que define los otros anchos de borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-width'>`
+ - : El tamaño del borde. Mira {{ cssxref("border-width") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 1px solid blue;
+ border-block-end-width: 5px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end-width", "border-block-end-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial |
+
+## Compatibilidad en Navegadores
+
+{{Compat("css.properties.border-block-end-width")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, and {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-end/index.html b/files/es/web/css/border-block-end/index.html
deleted file mode 100644
index 371989907250a2..00000000000000
--- a/files/es/web/css/border-block-end/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: border-block-end
-slug: Web/CSS/border-block-end
-tags:
- - CSS
- - Experimental
- - Propiedad CSS
- - Propiedad Lógica CSS
- - Referencia
-translation_of: Web/CSS/border-block-end
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad CSS border-block-end
es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. border-block-end
puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-border-block-end: 1px;
-border-block-end: 2px dotted;
-border-block-end: medium dashed blue;
-
-
-Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-Una o más de los siguientes, en cualquier orden:
-
-
- <'border-width'>
- Véase {{ cssxref("border-width") }}
- <'border-style'>
- Véase {{ cssxref("border-style") }}
- <'color'>
- Véase {{ cssxref("color") }}
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Texto de ejemplo</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- border-block-end: 5px dashed blue;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial
-
-
-
-
-Compatibilidad en navegadores
-
-{{Compat("css.properties.border-block-end")}}
-
-Mira también
-
-
- Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-end/index.md b/files/es/web/css/border-block-end/index.md
new file mode 100644
index 00000000000000..77ac979639d786
--- /dev/null
+++ b/files/es/web/css/border-block-end/index.md
@@ -0,0 +1,83 @@
+---
+title: border-block-end
+slug: Web/CSS/border-block-end
+tags:
+ - CSS
+ - Experimental
+ - Propiedad CSS
+ - Propiedad Lógica CSS
+ - Referencia
+translation_of: Web/CSS/border-block-end
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad [CSS](/es/docs/Web/CSS) **`border-block-end`** es un atajo para establecer los valores de las propiedades individuales del borde final lógico de un bloque en un solo lugar de la hoja de estilos. `border-block-end` puede ser usada para establecer los valores de una o más de las siguientes propiedades: {{Cssxref("border-block-end-width")}}, {{Cssxref("border-block-end-style")}}, {{Cssxref("border-block-end-color")}}. Se asigna a un borde físico, dependiendo del modo de escritura del elemento, su direccionalidad y orientación de texto. Corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}, dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+border-block-end: 1px;
+border-block-end: 2px dotted;
+border-block-end: medium dashed blue;
+```
+
+Está relacionada con {{cssxref("border-block-start")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, las cuales definen el borde contrario del elemento.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+Una o más de los siguientes, en cualquier orden:
+
+- `<'border-width'>`
+ - : Véase {{ cssxref("border-width") }}
+- `<'border-style'>`
+ - : Véase {{ cssxref("border-style") }}
+- `<'color'>`
+ - : Véase {{ cssxref("color") }}
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ border-block-end: 5px dashed blue;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estatus | Comentarios |
+| -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-end", "border-block-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-end")}}
+
+## Mira también
+
+- Las propiedades físicas mapeadas: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, y {{cssxref("border-left")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-start-color/index.html b/files/es/web/css/border-block-start-color/index.html
deleted file mode 100644
index 3ef9b64ac48d88..00000000000000
--- a/files/es/web/css/border-block-start-color/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: border-block-start-color
-slug: Web/CSS/border-block-start-color
-translation_of: Web/CSS/border-block-start-color
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-start-color
define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
-
-
-
-Sintaxis
-
-border-block-start-color: blue;
-border-block-start-color: #4c5d21;
-
-
-Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'color'>
- Mira {{ cssxref("border-color") }}
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 10px solid blue;
- border-block-start-color: red;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}}
- {{Spec2("CSS Logical Properties")}}
- Definición Inicial
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-start-color")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-start-color/index.md b/files/es/web/css/border-block-start-color/index.md
new file mode 100644
index 00000000000000..0c843a7866e4dd
--- /dev/null
+++ b/files/es/web/css/border-block-start-color/index.md
@@ -0,0 +1,73 @@
+---
+title: border-block-start-color
+slug: Web/CSS/border-block-start-color
+translation_of: Web/CSS/border-block-start-color
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start-color`** define el color del borde lógico de bloque inicial de un elemento, que se asigna al color de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-block-start-color.html")}}
+
+## Sintaxis
+
+```css
+border-block-start-color: blue;
+border-block-start-color: #4c5d21;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, y {{cssxref("border-inline-end-color")}}, que definen los otros colores del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'color'>`
+ - : Mira {{ cssxref("border-color") }}
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 10px solid blue;
+ border-block-start-color: red;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-color", "border-block-start-color")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-start-color")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-start-style/index.html b/files/es/web/css/border-block-start-style/index.html
deleted file mode 100644
index 7207121c53fa00..00000000000000
--- a/files/es/web/css/border-block-start-style/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: border-block-start-style
-slug: Web/CSS/border-block-start-style
-translation_of: Web/CSS/border-block-start-style
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-start-style
define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
-
-
-
-Sintaxis
-
-/* <'border-style'> values */
-border-block-start-style: dashed;
-border-block-start-style: dotted;
-border-block-start-style: groove;
-
-
-Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-style'>
- El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 5px solid blue;
- border-block-start-style: dashed;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}}
- {{Spec2("CSS Logical Properties")}}
- Definición Inicial
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-start-style")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-start-style/index.md b/files/es/web/css/border-block-start-style/index.md
new file mode 100644
index 00000000000000..b33fbba2f1907c
--- /dev/null
+++ b/files/es/web/css/border-block-start-style/index.md
@@ -0,0 +1,75 @@
+---
+title: border-block-start-style
+slug: Web/CSS/border-block-start-style
+translation_of: Web/CSS/border-block-start-style
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start-style`** define el estilo del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físicodependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}} dependiendo de los valores definidos por{{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-block-start-style.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-style'> values */
+border-block-start-style: dashed;
+border-block-start-style: dotted;
+border-block-start-style: groove;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-end-style")}}, {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-style'>`
+ - : El estilo de la línea del borde. Mira {{ cssxref("border-style") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 5px solid blue;
+ border-block-start-style: dashed;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-style", "border-block-start-style")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-start-style")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-start-width/index.html b/files/es/web/css/border-block-start-width/index.html
deleted file mode 100644
index 76aa603ef6c583..00000000000000
--- a/files/es/web/css/border-block-start-width/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: border-block-start-width
-slug: Web/CSS/border-block-start-width
-translation_of: Web/CSS/border-block-start-width
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-start-width
define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
-
-
-
-Sintaxis
-
-/* <'border-width'> values */
-border-block-start-width: 5px;
-border-block-start-width: thick;
-
-
-Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-width'>
- El ancho del borde. Mira {{ cssxref("border-width") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 1px solid blue;
- border-block-start-width: 5px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}}
- {{Spec2("CSS Logical Properties")}}
- Definición Inicial
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-start-width")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-start-width/index.md b/files/es/web/css/border-block-start-width/index.md
new file mode 100644
index 00000000000000..886c34601d395f
--- /dev/null
+++ b/files/es/web/css/border-block-start-width/index.md
@@ -0,0 +1,74 @@
+---
+title: border-block-start-width
+slug: Web/CSS/border-block-start-width
+translation_of: Web/CSS/border-block-start-width
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start-width`** define el ancho del borde lógico de bloque inicial de un elemento, que se asigna al estilo de borde físico dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-block-start-width.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-width'> values */
+border-block-start-width: 5px;
+border-block-start-width: thick;
+```
+
+Propiedades relacionadas son{{cssxref("border-block-end-width")}}, {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 1px solid blue;
+ border-block-start-width: 5px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start-width", "border-block-start-width")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-start-width")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-start/index.html b/files/es/web/css/border-block-start/index.html
deleted file mode 100644
index 416bd9509827de..00000000000000
--- a/files/es/web/css/border-block-start/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-block-start
-slug: Web/CSS/border-block-start
-translation_of: Web/CSS/border-block-start
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-start
es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.
-
-{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
-
-
-
-Sintaxis
-
-border-block-start: 1px;
-border-block-start: 2px dotted;
-border-block-start: medium dashed blue;
-
-
-border-block-start
puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.
-
-{{cssinfo}}
-
-Valores
-
-El border-block-start
es especificado con uno o más de los siguientes valores, en cualquier orden:
-
-
- <'border-width'>
- El ancho del borde. Mira {{cssxref("border-width")}}.
- <'border-style'>
- El estilo de la línea del borde. Mira {{cssxref("border-style")}}.
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- border-block-start: 5px dashed blue;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}}
- {{Spec2("CSS Logical Properties")}}
- Definición Inicial
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-start")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-start/index.md b/files/es/web/css/border-block-start/index.md
new file mode 100644
index 00000000000000..c5d0017e3c870a
--- /dev/null
+++ b/files/es/web/css/border-block-start/index.md
@@ -0,0 +1,81 @@
+---
+title: border-block-start
+slug: Web/CSS/border-block-start
+translation_of: Web/CSS/border-block-start
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-start`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde de bloque inicial en un solo lugar en la hoja de estilos.
+
+{{EmbedInteractiveExample("pages/css/border-block-start.html")}}
+
+## Sintaxis
+
+```css
+border-block-start: 1px;
+border-block-start: 2px dotted;
+border-block-start: medium dashed blue;
+```
+
+`border-block-start` puede ser usado para establecer los valores de uno o más de {{cssxref("border-block-start-width")}}, {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-start-color")}}. El borde físico al que se asigna depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos para {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+Propiedades relacionadas son {{cssxref("border-block-end")}}, {{cssxref("border-inline-start")}}, y {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+El `border-block-start` es especificado con uno o más de los siguientes valores, en cualquier orden:
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{cssxref("border-width")}}.
+- `<'border-style'>`
+ - : El estilo de la línea del borde. Mira {{cssxref("border-style")}}.
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ border-block-start: 5px dashed blue;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-start", "border-block-start")}} | {{Spec2("CSS Logical Properties")}} | Definición Inicial |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-start")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-style/index.html b/files/es/web/css/border-block-style/index.html
deleted file mode 100644
index 046a8287ed1939..00000000000000
--- a/files/es/web/css/border-block-style/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: border-block-style
-slug: Web/CSS/border-block-style
-translation_of: Web/CSS/border-block-style
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-style
CSS property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <'border-style'> values */
-border-block-style: dashed;
-border-block-style: dotted;
-border-block-style: groove;
-
-
-El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'border-style'>
- La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 5px solid blue;
- border-block-style: dashed;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-style")}}
-
-
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-style/index.md b/files/es/web/css/border-block-style/index.md
new file mode 100644
index 00000000000000..ec4f7761e4fd6c
--- /dev/null
+++ b/files/es/web/css/border-block-style/index.md
@@ -0,0 +1,73 @@
+---
+title: border-block-style
+slug: Web/CSS/border-block-style
+translation_of: Web/CSS/border-block-style
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-style`** [CSS](/es/docs/Web/CSS) property defines the style of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* <'border-style'> values */
+border-block-style: dashed;
+border-block-style: dotted;
+border-block-style: groove;
+```
+
+El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-inline-style")}}, que establece {{cssxref("border-inline-start-style")}}, y {{cssxref("border-inline-end-style")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 5px solid blue;
+ border-block-style: dashed;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-style", "border-block-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-style")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block-width/index.html b/files/es/web/css/border-block-width/index.html
deleted file mode 100644
index f6f75e09c8d754..00000000000000
--- a/files/es/web/css/border-block-width/index.html
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: border-block-width
-slug: Web/CSS/border-block-width
-translation_of: Web/CSS/border-block-width
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block-width
CSS property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <'border-width'> values */
-border-block-width: 5px;
-border-block-width: thick;
-
-
-El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'border-width'>
- El ancho del borde. Mira {{ cssxref("border-width") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 1px solid blue;
- border-block-width: 5px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-width")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block-width/index.md b/files/es/web/css/border-block-width/index.md
new file mode 100644
index 00000000000000..20db4502046039
--- /dev/null
+++ b/files/es/web/css/border-block-width/index.md
@@ -0,0 +1,72 @@
+---
+title: border-block-width
+slug: Web/CSS/border-block-width
+translation_of: Web/CSS/border-block-width
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block-width`** [CSS](/es/docs/Web/CSS) property defines the width of the logical block borders of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* <'border-width'> values */
+border-block-width: 5px;
+border-block-width: thick;
+```
+
+El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-inline-width")}}, que establece {{cssxref("border-inline-start-width")}}, y {{cssxref("border-inline-end-width")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 1px solid blue;
+ border-block-width: 5px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-width")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-block/index.html b/files/es/web/css/border-block/index.html
deleted file mode 100644
index 8d08d69bf275c2..00000000000000
--- a/files/es/web/css/border-block/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: border-block
-slug: Web/CSS/border-block
-translation_of: Web/CSS/border-block
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-block
es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.
-
-border-block: 1px;
-border-block: 2px dotted;
-border-block: medium dashed blue;
-
-
-border-block
puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .
-
-Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-El border-block
es especificado con uno o más de los siguientes valores, en cualquier orden:
-
-
- <'border-width'>
- El ancho del borde. Mirar {{cssxref("border-width")}}.
- <'border-style'>
- El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.
- <'color'>
- El color del borde. Mirar {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- border-block: 5px dashed blue;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}}
- {{Spec2("CSS Logical Properties")}}
- Definition inicial
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-block/index.md b/files/es/web/css/border-block/index.md
new file mode 100644
index 00000000000000..9cb8534e65c12d
--- /dev/null
+++ b/files/es/web/css/border-block/index.md
@@ -0,0 +1,81 @@
+---
+title: border-block
+slug: Web/CSS/border-block
+translation_of: Web/CSS/border-block
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-block`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.
+
+```css
+border-block: 1px;
+border-block: 2px dotted;
+border-block: medium dashed blue;
+```
+
+`border-block` puede ser usada para establecer los valores de uno o más {{cssxref("border-block-width")}}, {{cssxref("border-block-style")}}, y {{cssxref("border-block-color")}} estableciendo tanto el inicio como el final en la dimensión del bloque a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponde a las propiedades {{cssxref ("border-top")}} y {{cssxref ("border-bottom")}} o {{cssxref ("border-right")}}, y {{cssxref ("border -left ")}} dependiendo de los valores definidos para {{cssxref (" modo de escritura ")}}, {{cssxref (" dirección ")}}, y {{cssxref (" orientación de texto ")}} .
+
+Los bordes en la otra dimensión se pueden establecer con {{cssxref ("border-inline")}}, que establece {{cssxref ("border-inline-start")}}, y {{cssxref ("border-inline- fin")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+El `border-block` es especificado con uno o más de los siguientes valores, en cualquier orden:
+
+- `<'border-width'>`
+ - : El ancho del borde. Mirar {{cssxref("border-width")}}.
+- `<'border-style'>`
+ - : El estilo de la línea del borde. Mirar {{cssxref("border-style")}}.
+- `<'color'>`
+ - : El color del borde. Mirar {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ border-block: 5px dashed blue;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------ |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block", "border-block")}} | {{Spec2("CSS Logical Properties")}} | Definition inicial |
+
+## Compatibilidad en navegadores
+
+La tabla de compatibilidad en esta página se genera a partir de datos estructurados. Si desea contribuir con los datos, visite y envíanos un pull request.
+
+{{Compat("css.properties.border-block")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-bottom-color/index.html b/files/es/web/css/border-bottom-color/index.html
deleted file mode 100644
index d9c0b135e3be3f..00000000000000
--- a/files/es/web/css/border-bottom-color/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: border-bottom-color
-slug: Web/CSS/border-bottom-color
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-bottom-color
----
-<< Volver
-
-Resumen
-
-La propiedad border-bottom-color
define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave transparent
e.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}
- Se aplica a: todos los elementos
- {{ Cssxref("inheritance", "Valor heredado") }}: non
- Porcentajes: N/A
- Medio : {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.
-
-
-Sintaxis
-
-border-bottom-color: couleur | transparent | inherit
-
-
-Valores
-
-
- color
- puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (azul ).
-
-
-
- transparent
- el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.
-
-
-Propiedades relacionadas
-
-
- {{ Cssxref("border-color") }}
- {{ Cssxref("border-left-color") }}
- {{ Cssxref("border-right-color") }}
- {{ Cssxref("border-top-color") }}
-
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-element {
- width: 300px;
- padding: 15px;
- border-bottom-size: 1px;
- border-bottom-style: solid;
- border-bottom-color: #000;
-}
-
-
-Notas
-
-
-
-Especificaciones
-
-
-
-Compatibilidades
-
-
-
-
- Navegador
- Versión mínima
-
-
- Internet Explorer
- 4
-
-
- Firefox
- 1
-
-
- Netscape
- 6
-
-
- Opera
- 3.5
-
-
-
-
-
-
-Ver también
-
-{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}
-
-
-
-{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}
diff --git a/files/es/web/css/border-bottom-color/index.md b/files/es/web/css/border-bottom-color/index.md
new file mode 100644
index 00000000000000..fb341a78f82d62
--- /dev/null
+++ b/files/es/web/css/border-bottom-color/index.md
@@ -0,0 +1,87 @@
+---
+title: border-bottom-color
+slug: Web/CSS/border-bottom-color
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom-color
+---
+<< [Volver](/es/Guía_de_referencia_de_CSS)
+
+### Resumen
+
+La propiedad `border-bottom-color` define el color del borde inferior de un elemento, con la ayuda de un valor de color o con la palabra clave `transparent`e.
+
+- {{ Cssxref("initial", "Valor inicial") }}: propiedad {{ Cssxref("color") }}
+- Se aplica a: todos los elementos
+- {{ Cssxref("inheritance", "Valor heredado") }}: non
+- Porcentajes: N/A
+- Medio : {{ Xref_cssvisual() }}
+- {{ Cssxref("computed value", "Valor calculado") }}: como se especifique o si proviene de la propiedad {{ Cssxref("color") }}, será el valor {{ Cssxref("color") }}.
+
+### Sintaxis
+
+```
+border-bottom-color: couleur | transparent | inherit
+```
+
+### Valores
+
+- color
+ - : puede especificarse por un valor RGB hexa-decimal o regular o por una palabra clave predefinida (_azul_).
+
+
+
+- transparent
+ - : el elemento no tiene color propio, muestra el color del elemento atrás suyo en el árbol de apilado.
+
+### Propiedades relacionadas
+
+- {{ Cssxref("border-color") }}
+- {{ Cssxref("border-left-color") }}
+- {{ Cssxref("border-right-color") }}
+- {{ Cssxref("border-top-color") }}
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border.html)
+
+```
+element {
+ width: 300px;
+ padding: 15px;
+ border-bottom-size: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: #000;
+}
+```
+
+### Notas
+
+- [Color Chart by VisiBone (en)](http://html-color-codes.com/)
+- [Sélecteur de couleur, chez yoyodesign (fr)](http://www.yoyodesign.org/outils/ncolor/ncolor.php?langue=fr)
+
+### Especificaciones
+
+- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-color)
+- [CSS 3 (en)](http://www.w3.org/TR/css3-background/#border-bottom)
+
+### Compatibilidades
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 4 |
+| Firefox | 1 |
+| Netscape | 6 |
+| Opera | 3.5 |
+
+### Ver también
+
+{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "de": "de/CSS/border-bottom-color", "en": "en/CSS/border-bottom-color", "fr": "fr/CSS/border-bottom-color", "ja": "ja/CSS/border-bottom-color", "pl": "pl/CSS/border-bottom-color" } ) }}
diff --git a/files/es/web/css/border-bottom-left-radius/index.html b/files/es/web/css/border-bottom-left-radius/index.html
deleted file mode 100644
index 7a03d45c7913cc..00000000000000
--- a/files/es/web/css/border-bottom-left-radius/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: border-bottom-left-radius
-slug: Web/CSS/border-bottom-left-radius
-tags:
- - Bordes CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-bottom-left-radius
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad CSS border-bottom-left-radius
establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0
, no se redondeará la esquina, dejándola cuadrada.
-
-
-
-Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
-
-Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad
border-bottom-left-radius
, el valor de esta propiedad es restaurado a su valor inicial por la
propiedad de forma reducida .
-
-{{cssinfo}}
-
-Sintaxis
-
-/* la esquina es un círculo */
-/* border-bottom-left-radius: radius */
-border-bottom-left-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-bottom-left-radius: horizontal vertical */
-border-bottom-left-radius: 0.5em 1em;
-
-border-bottom-left-radius: inherit;
-
-
-
-
donde:
-
-
- radius
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
- horizontal
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
- vertical
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
-
-Valores
-
-
- <length>
- Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
- <percentage>
- Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-
-
-
- Ejemplo en vivo
- Código
-
-
-
-
-
-
-
- Un arco de círculo usado como borde
-
-div {
- border-bottom-left-radius: 40px 40px;
-}
-
-
-
-
-
-
-
- Un arco de elipse usado como borde
-
-div {
- border-bottom-left-radius: 40px 20px;
-}
-
-
-
-
-
-
-
- La caja es un cuadro: un arco de círculo es usado como borde
-
-div {
- border-bottom-left-radius: 40%;
-}
-
-
-
-
-
-
-
- La caja no es un círculo: un arco de elipse es usado como borde
-
-div {
- border-bottom-left-radius: 40%;
-}
-
-
-
-
-
-
-
- El color de fondo está delimitado al borde
-
-div {
- border-bottom-left-radius:40%;
- border-style: black 3px double;
- background-color: rgb(250,20,70);
- background-clip: content-box;
-}
-
-
-
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-bottom-left-radius")}}
-
-Véase también
-
-Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.
diff --git a/files/es/web/css/border-bottom-left-radius/index.md b/files/es/web/css/border-bottom-left-radius/index.md
new file mode 100644
index 00000000000000..b0f9bf7443e584
--- /dev/null
+++ b/files/es/web/css/border-bottom-left-radius/index.md
@@ -0,0 +1,163 @@
+---
+title: border-bottom-left-radius
+slug: Web/CSS/border-bottom-left-radius
+tags:
+ - Bordes CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-bottom-left-radius
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad CSS **`border-bottom-left-radius`** establece el redondeo de la esquina inferior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0`, no se redondeará la esquina, dejándola cuadrada.
+
+![border-bottom-left-radius.png](/@api/deki/files/6136/=border-bottom-left-radius.png)
+
+Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
+
+> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-bottom-left-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties).
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* la esquina es un círculo */
+/* border-bottom-left-radius: radius */
+border-bottom-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-left-radius: horizontal vertical */
+border-bottom-left-radius: 0.5em 1em;
+
+border-bottom-left-radius: inherit;
+```
+
+donde:
+
+- _radius_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+- _horizontal_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+- _vertical_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+### Valores
+
+- ``
+ - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+- ``
+ - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+#### Un arco de círculo usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-bottom-left-radius: 40px 40px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### Un arco de elipse usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-bottom-left-radius: 40px 20px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja es un cuadro: un arco de círculo es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-bottom-left-radius: 40%;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja no es un círculo: un arco de elipse es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ border-bottom-left-radius: 40%;
+ width: 100px;
+ height: 200px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### El color de fondo está delimitado al borde
+
+```html hidden
+
+```
+
+```css
+div {
+ border: black 3px double;
+ border-bottom-left-radius: 40%;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(250,20,70);
+ background-clip: content-box;
+}
+```
+
+{{EmbedLiveSample}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-bottom-left-radius")}}
+
+## Véase también
+
+Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-top-left-radius")}}.
diff --git a/files/es/web/css/border-bottom-right-radius/index.html b/files/es/web/css/border-bottom-right-radius/index.html
deleted file mode 100644
index 77c1905c128f55..00000000000000
--- a/files/es/web/css/border-bottom-right-radius/index.html
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: border-bottom-right-radius
-slug: Web/CSS/border-bottom-right-radius
-tags:
- - Bordes CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-bottom-right-radius
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad CSS border-bottom-right-radius
establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0
, no se redondeará la esquina, dejándola cuadrada.
-
-
-
-Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
-
-Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad
border-bottom-right-radius
, el valor de esta propiedad es restaurado a su valor inicial por la
propiedad de forma reducida .
-
-{{cssinfo}}
-
-Sintaxis
-
-/* la esquina es un círculo */
-/* border-bottom-right-radius: radius */
-border-bottom-right-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-bottom-right-radius: horizontal vertical */
-border-bottom-right-radius: 0.5em 1em;
-
-border-bottom-right-radius: inherit;
-
-
-
-
donde:
-
-
- radius
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
- horizontal
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
- vertical
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
-
-Valores
-
-
- <length>
- Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
- <percentage>
- Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-
-
-
- Ejemplo en vivo
- Código
-
-
-
-
-
-
-
- Un arco de círculo usado como borde
-
-div {
- border-bottom-right-radius: 40px 40px;
-}
-
-
-
-
-
-
-
- Un arco de elipse usado como borde
-
-div {
- border-bottom-right-radius: 40px 20px;
-}
-
-
-
-
-
-
-
- La caja es un cuadro: un arco de círculo es usado como borde
-
-div {
- border-bottom-right-radius: 40%;
-}
-
-
-
-
-
-
-
- La caja no es un círculo: un arco de elipse es usado como borde
-
-div {
- border-bottom-right-radius: 40%;
-}
-
-
-
-
-
-
-
- El color de fondo está delimitado al borde
-
-div {
- border-bottom-right-radius:40%;
- border-style: black 3px double;
- background-color: rgb(250,20,70);
- background-clip: content-box;
-}
-
-
-
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-bottom-right-radius")}}
-
-Véase también
-
-Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/es/web/css/border-bottom-right-radius/index.md b/files/es/web/css/border-bottom-right-radius/index.md
new file mode 100644
index 00000000000000..3e786a9fe53bf3
--- /dev/null
+++ b/files/es/web/css/border-bottom-right-radius/index.md
@@ -0,0 +1,163 @@
+---
+title: border-bottom-right-radius
+slug: Web/CSS/border-bottom-right-radius
+tags:
+ - Bordes CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-bottom-right-radius
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad CSS **`border-bottom-right-radius`** establece el redondeo de la esquina inferior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0`, no se redondeará la esquina, dejándola cuadrada.
+
+![border-bottom-right-radius.png](/@api/deki/files/6134/=border-bottom-right-radius.png)
+
+Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
+
+> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-bottom-right-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties).
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* la esquina es un círculo */
+/* border-bottom-right-radius: radius */
+border-bottom-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-bottom-right-radius: horizontal vertical */
+border-bottom-right-radius: 0.5em 1em;
+
+border-bottom-right-radius: inherit;
+```
+
+donde:
+
+- _radius_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+- _horizontal_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+- _vertical_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+### Valores
+
+- ``
+ - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+- ``
+ - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+#### Un arco de círculo usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-bottom-right-radius: 40px 40px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### Un arco de elipse usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-bottom-right-radius: 40px 20px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja es un cuadro: un arco de círculo es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-bottom-right-radius: 40%;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja no es un círculo: un arco de elipse es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ border-bottom-right-radius: 40%;
+ width: 100px;
+ height: 200px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### El color de fondo está delimitado al borde
+
+```html hidden
+
+```
+
+```css
+div {
+ border: black 3px double;
+ border-bottom-right-radius: 40%;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(250,20,70);
+ background-clip: content-box;
+}
+```
+
+{{EmbedLiveSample}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-bottom-right-radius")}}
+
+## Véase también
+
+Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-top-left-radius")}}, y {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/es/web/css/border-bottom-style/index.html b/files/es/web/css/border-bottom-style/index.html
deleted file mode 100644
index 69c09f07904a0f..00000000000000
--- a/files/es/web/css/border-bottom-style/index.html
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: border-bottom-style
-slug: Web/CSS/border-bottom-style
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-bottom-style
----
-
-
-<< Volver
-
-
-
-Resumen
-
-border-bottom-style
define el estilo de línea del borde inferior de una caja.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
- Se aplica a: todos los elementos
- {{ Cssxref("inheritance", "Valor heredado") }}: no
- Porcentajes: N/A
- Medio: {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}: como se especificó
-
-
-Sintaxis
-
-border-bottom-style: <border-style> | inherit
-
-
-Valores
-
-
- none
- sin borde.
- hidden
- es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.
- dotted
- series de puntos (....).
- dashed
- series de guiones cortos o pequeñas líneas (----).
- solid
- línea única, recta y sólida.
- double
- dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de bordeborder-width
.
- groove
- efecto de hundido.
- ridge
- al revés de 'groove'. El borde aparece en 3D (saliendo).
- inset
- hace que la caja aparezca hundida.
- outset
- opuesto a 'inset'. La caja aparece en 3D (saliendo).
-
-
-Propiedades relacionadas
-
-
- {{ Cssxref("border-left-style") }}
- {{ Cssxref("border-right-style") }}
- {{ Cssxref("border-top-style") }}
- {{ Cssxref("border-style") }}
-
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-element {
- border-bottom-size: 1px;
- border-bottom-style: dotted;
- border-bottom-color: #000;
-}
-
-
-Notas
-
-A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.
-
-Especificaciones
-
-
-
-Compatibilidades
-
-Ver también
-
-{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}
-
-
-
-
-
-{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}
diff --git a/files/es/web/css/border-bottom-style/index.md b/files/es/web/css/border-bottom-style/index.md
new file mode 100644
index 00000000000000..5ecc9e53e5a0e3
--- /dev/null
+++ b/files/es/web/css/border-bottom-style/index.md
@@ -0,0 +1,90 @@
+---
+title: border-bottom-style
+slug: Web/CSS/border-bottom-style
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom-style
+---
+<< [Volver](/es/Guía_de_referencia_de_CSS)
+
+### Resumen
+
+`border-bottom-style` define el estilo de línea del borde inferior de una caja.
+
+- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("none", "ninguno") }}
+- Se aplica a: todos los elementos
+- {{ Cssxref("inheritance", "Valor heredado") }}: no
+- Porcentajes: N/A
+- Medio: {{ Xref_cssvisual() }}
+- {{ Cssxref("computed value", "Valor calculado") }}: como se especificó
+
+### Sintaxis
+
+```
+border-bottom-style: | inherit
+```
+
+### Valores
+
+- none
+ - : sin borde.
+- hidden
+ - : es igual a 'none', excepto en términos de resolución de conflicto para elementos de tabla.
+- dotted
+ - : series de puntos (....).
+- dashed
+ - : series de guiones cortos o pequeñas líneas (----).
+- solid
+ - : línea única, recta y sólida.
+- double
+ - : dos líneas rectas que se suman a la cantidad de píxeles definidos como ancho de borde`border-width`.
+- groove
+ - : efecto de hundido.
+- ridge
+ - : al revés de 'groove'. El borde aparece en 3D (saliendo).
+- inset
+ - : hace que la caja aparezca hundida.
+- outset
+ - : opuesto a 'inset'. La caja aparece en 3D (saliendo).
+
+### Propiedades relacionadas
+
+- {{ Cssxref("border-left-style") }}
+- {{ Cssxref("border-right-style") }}
+- {{ Cssxref("border-top-style") }}
+- {{ Cssxref("border-style") }}
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border.html)
+
+```
+element {
+ border-bottom-size: 1px;
+ border-bottom-style: dotted;
+ border-bottom-color: #000;
+}
+```
+
+### Notas
+
+A menos que un valor {{ Cssxref("border-style") }} sea definido, el borde no aparecerá porque el valor por defecto es 'none'.
+
+### Especificaciones
+
+- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#propdef-border-bottom-style)
+- [CSS 3](http://www.w3.org/TR/css3-background/#border-style)
+
+### Compatibilidades
+
+### Ver también
+
+{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "de": "de/CSS/border-bottom-style", "en": "en/CSS/border-bottom-style", "fr": "fr/CSS/border-bottom-style", "ja": "ja/CSS/border-bottom-style", "pl": "pl/CSS/border-bottom-style" } ) }}
diff --git a/files/es/web/css/border-bottom-width/index.html b/files/es/web/css/border-bottom-width/index.html
deleted file mode 100644
index e1152c2d16e20c..00000000000000
--- a/files/es/web/css/border-bottom-width/index.html
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: border-bottom-width
-slug: Web/CSS/border-bottom-width
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-bottom-width
----
-
-
-<< Volver
-
-Resumen
-
-border-bottom-width
define el ancho del borde inferior de una caja.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
- Se aplica a : todos los elementos
- {{ Cssxref("inheritance", "Valor heredado") }}: no
- Porcentajes: N/A
- Medio: {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es none
o hidden
.
-
-
-Sintaxis
-
-border-bottom-width: <border-width> | inherit
-
-
-Valores
-
-
- thin
- un borde fino.
- medium
- un borde mediano.
- thick
- un borde grueso.
- <length>
- El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.
- Nota : El valor em
también es soportada.
-
-
-Propiedades relacionadas
-
-
- {{ Cssxref("border-left-style") }}
- {{ Cssxref("border-right-style") }}
- {{ Cssxref("border-top-style") }}
- {{ Cssxref("border-style") }}
-
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-element {
- border-bottom-width: thin;
- border-bottom-style: solid;
- border-bottom-color: #000;
-}
-
-
-Especificacions
-
-
-
-Compatibilidades
-
-
-
-
- Navegador
- Versión mínima
-
-
- Internet Explorer
-
-
-
- Firefox
-
-
-
- Netscape
-
-
-
- Opera
-
-
-
-
-
-Ver también
-
-{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}
-
-
-
-
-
-{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}
diff --git a/files/es/web/css/border-bottom-width/index.md b/files/es/web/css/border-bottom-width/index.md
new file mode 100644
index 00000000000000..92d8e28f339ce9
--- /dev/null
+++ b/files/es/web/css/border-bottom-width/index.md
@@ -0,0 +1,84 @@
+---
+title: border-bottom-width
+slug: Web/CSS/border-bottom-width
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom-width
+---
+<< [Volver](/es/Guía_de_referencia_de_CSS)
+
+### Resumen
+
+`border-bottom-width` define el ancho del borde inferior de una caja.
+
+- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
+- Se aplica a : todos los elementos
+- {{ Cssxref("inheritance", "Valor heredado") }}: no
+- Porcentajes: N/A
+- Medio: {{ Xref_cssvisual() }}
+- {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo es `none` o `hidden`.
+
+### Sintaxis
+
+```
+border-bottom-width: | inherit
+```
+
+### Valores
+
+- thin
+ - : un borde fino.
+- medium
+ - : un borde mediano.
+- thick
+ - : un borde grueso.
+- \
+ - : El espesor de un borde tiene un valor explícito. los anchos de borde no pueden ser negativos.
+
+ Nota : El valor `em` también es soportada.
+
+### Propiedades relacionadas
+
+- {{ Cssxref("border-left-style") }}
+- {{ Cssxref("border-right-style") }}
+- {{ Cssxref("border-top-style") }}
+- {{ Cssxref("border-style") }}
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border.html)
+
+```
+element {
+ border-bottom-width: thin;
+ border-bottom-style: solid;
+ border-bottom-color: #000;
+}
+```
+
+### Especificacions
+
+- [CSS 1](http://www.w3.org/TR/CSS1#border-width)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-width-properties)
+- [CSS 3](http://www.w3.org/TR/css3-background/#border-width)
+
+### Compatibilidades
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | |
+| Firefox | |
+| Netscape | |
+| Opera | |
+
+### Ver también
+
+{{ Cssxref("border-bottom") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-width") }}
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "de": "de/CSS/border-bottom-width", "en": "en/CSS/border-bottom-width", "pl": "pl/CSS/border-bottom-width", "fr": "fr/CSS/border-bottom-width", "ja": "ja/CSS/border-bottom-width" } ) }}
diff --git a/files/es/web/css/border-bottom/index.html b/files/es/web/css/border-bottom/index.html
deleted file mode 100644
index 00e0cf9b6d9778..00000000000000
--- a/files/es/web/css/border-bottom/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: border-bottom
-slug: Web/CSS/border-bottom
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-bottom
----
-<< Volver
-
-Resumen
-
-La propiedad border-bottom
permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
- Se aplica a : todos los elementos
- {{ Cssxref("inheritance", "Valor heredado") }}: no
- Porcentajes: N/A
- Medio: {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
-
-
-Sintaxis
-
-border-bottom: [ <border-width> || <border-style> || <border-color> ] | inherit
-
-
-Valores
-
-
- <border-width>
- ver {{ Cssxref("border-bottom-width") }}.
- <border-style>
- ver {{ Cssxref("border-bottom-style") }}.
- <border-color>
- ver {{ Cssxref("border-bottom-color") }}.
-
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-element {
- border-bottom-width: 1px solid #000;
-}
-
-
-Notas
-
-Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.
-
-Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.
-
-Como con todas las propiedades generales, border-bottom
siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.
-
-Lo que significa que:
-
- border-bottom-style: dotted;
- border-bottom: thick green;
-
-es idéntico a:
-
- border-bottom-style: dotted;
- border-bottom: none thick green;
-
-y el valor de {{ Cssxref("border-bottom-style") }} dado antes de border-bottom
es ignorado.
-
-Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es none
, el no especificar la parte <border-style> en la propiedad general significa: sin borde .
-
-Especificaciones
-
-
-
-Compatibilidades
-
-
-
-
- Navegador
- Versión mínima
-
-
- Internet Explorer
- 4
-
-
- Firefox
- 1
-
-
- Netscape
- 4
-
-
- Opera
- 3.5
-
-
-
-
-Ver también
-
-{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},
-
-
-
-{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}
diff --git a/files/es/web/css/border-bottom/index.md b/files/es/web/css/border-bottom/index.md
new file mode 100644
index 00000000000000..4132327f98f262
--- /dev/null
+++ b/files/es/web/css/border-bottom/index.md
@@ -0,0 +1,97 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-bottom
+---
+<< [Volver](/es/Guía_de_referencia_de_CSS)
+
+### Resumen
+
+La propiedad `border-bottom` permite de definir de una vez todas las propiedades individuales {{ Cssxref("border-bottom-color") }}, {{ Cssxref("border-bottom-style") }}, y {{ Cssxref("border-bottom-width") }}, las cuales describen el color, estilo y ancho del borde inferior de un elementos.
+
+- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
+- Se aplica a : todos los elementos
+- {{ Cssxref("inheritance", "Valor heredado") }}: no
+- Porcentajes: N/A
+- Medio: {{ Xref_cssvisual() }}
+- {{ Cssxref("computed value", "Valor calculado") }}: ver propiedades individuales
+
+### Sintaxis
+
+```
+border-bottom: [ || || ] | inherit
+```
+
+### Valores
+
+- \
+ - : ver {{ Cssxref("border-bottom-width") }}.
+- \
+ - : ver {{ Cssxref("border-bottom-style") }}.
+- \
+ - : ver {{ Cssxref("border-bottom-color") }}.
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border.html)
+
+```
+element {
+ border-bottom-width: 1px solid #000;
+}
+```
+
+### Notas
+
+Si no se especifica el color del borde, este tomará el valor definido en la propiedad del {{ Cssxref("color") }} general.
+
+Se puede especificar los tres valores en cualquier orden y se pueden omitir una o dos.
+
+Como con todas las propiedades generales, `border-bottom` siempre inicia todos los valores que le pueden ser definidos aún cuando no están especificados, en este caso toma los valores por defecto.
+
+Lo que significa que:
+
+```
+ border-bottom-style: dotted;
+ border-bottom: thick green;
+```
+
+es idéntico a:
+
+```
+ border-bottom-style: dotted;
+ border-bottom: none thick green;
+```
+
+y el valor de {{ Cssxref("border-bottom-style") }} dado antes de `border-bottom` es ignorado.
+
+Como el valor por defecto de {{ Cssxref("border-bottom-style") }} es `none`, el no especificar la parte \ en la propiedad general significa: **sin borde**.
+
+### Especificaciones
+
+- [CSS 1](http://www.w3.org/TR/CSS1#border-bottom)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-shorthand-properties)
+- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-shorthands)
+
+### Compatibilidades
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 4 |
+| Firefox | 1 |
+| Netscape | 4 |
+| Opera | 3.5 |
+
+### Ver también
+
+{{ Cssxref("border") }}, {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-width") }}, {{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-bottom-color") }},
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "de": "de/CSS/border-bottom", "en": "en/CSS/border-bottom", "fr": "fr/CSS/border-bottom", "ja": "ja/CSS/border-bottom", "pl": "pl/CSS/border-bottom" } ) }}
diff --git a/files/es/web/css/border-collapse/index.html b/files/es/web/css/border-collapse/index.html
deleted file mode 100644
index 15602efea73cf1..00000000000000
--- a/files/es/web/css/border-collapse/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-collapse
-slug: Web/CSS/border-collapse
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-collapse
----
-<< Volver
-
-Resumen
-
-La propiedad border-collapse
se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated ). Esta propiedad especifica que modo de presentación de borde hay que usar.
-
-En el modelo de fusión, las celdas adyacentes comparten los mismos bordes
-
-En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).
-
-
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}
- {{ Cssxref("inheritance", "Valor heredado") }}: Yes
- Media: {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}:
-
-
-Sintaxis
-
-border-collapse: value
-
-
-Valores
-
-
- inherit : Define explícitamente el valor como heredada del elemento padre.
- separate : Utiliza el modo de presentación de separación de borde.
- collapse : Utiliza el modo de presentación de fusión de borde
-
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-<table border="1" style="border-collapse: collapse" bordercolor="#111111" width="500">
-
-
-<table border="1" style="border-collapse: separate" bordercolor="#111111" width="500">
-
-
-Notas
-
-En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de inset
se comporta como groove
, y outset
como ridge
.
-
-CSS 2 especifica que el valor inicial para esta propiedad es collapse
, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera separate
.
-
-Especificaciones
-
-
-
-Compatibilidades
-
-
-
-
- Navegador
- Versión mínima
-
-
- Internet Explorer
- 5.5
-
-
- Netscape
- 7
-
-
- Opera
- 5
-
-
-
-
-
-
-Ver también
-
-{{ Cssxref("border-spacing") }}
-
-
-
-{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}
diff --git a/files/es/web/css/border-collapse/index.md b/files/es/web/css/border-collapse/index.md
new file mode 100644
index 00000000000000..75230c97a08fe4
--- /dev/null
+++ b/files/es/web/css/border-collapse/index.md
@@ -0,0 +1,76 @@
+---
+title: border-collapse
+slug: Web/CSS/border-collapse
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-collapse
+---
+<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS)
+
+### Resumen
+
+La propiedad `border-collapse` se utiliza para fusionar los bordes. Ésto tiene una gran influencia sobre la presentación y el estilo de las celdas de tabla. La representación de los bordes de tabla es dividida en dos categorías en CSS2 - "fusión" y "separación" (collapsed - separated). Esta propiedad especifica que modo de presentación de borde hay que usar.
+
+En el modelo de fusión, las celdas adyacentes comparten los mismos bordes
+
+En el modelo de separación, cada celda adyacente tiene su propio borde (la distancia entre cada borde es dado con la propiedad del {{ Cssxref("border-spacing", "espaciado de borde") }}).
+
+- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("separate", "separado") }}
+- {{ Cssxref("inheritance", "Valor heredado") }}: Yes
+- Media: {{ Xref_cssvisual() }}
+- {{ Cssxref("computed value", "Valor calculado") }}:
+
+### Sintaxis
+
+```
+border-collapse: value
+```
+
+### Valores
+
+- **inherit** : Define explícitamente el valor como heredada del elemento padre.
+- **separate** : Utiliza el modo de presentación de separación de borde.
+- **collapse** : Utiliza el modo de presentación de fusión de borde
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border-collapse.html)
+
+```
+
+```
+
+```
+
+```
+
+### Notas
+
+En el modelo de fusión, el valor del {{ Cssxref("border-style", "estilo de borde") }} de `inset` se comporta como `groove`, y `outset` como `ridge`.
+
+CSS 2 especifica que el valor inicial para esta propiedad es `collapse`, pero CSS 2.1 y Mozilla/Opera definen o se comportan como si el valor inicial fuera `separate`.
+
+### Especificaciones
+
+- [CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#collapsing-borders)
+- [CSS 3](http://www.w3.org/TR/REC-CSS2/tables.html#borders)
+
+### Compatibilidades
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 5.5 |
+| Netscape | 7 |
+| Opera | 5 |
+
+### Ver también
+
+{{ Cssxref("border-spacing") }}
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "en": "en/CSS/border-collapse", "fr": "fr/CSS/border-collapse", "pl": "pl/CSS/border-collapse" } ) }}
diff --git a/files/es/web/css/border-color/index.html b/files/es/web/css/border-color/index.html
deleted file mode 100644
index 8e6e61c681717a..00000000000000
--- a/files/es/web/css/border-color/index.html
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: border-color
-slug: Web/CSS/border-color
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-color
----
-{{ PreviousNext("CSS:border", "CSS:border-style") }}
-
-Resumen
-
-la propiedad border-color
es un atajo para definir el color de los cuatro bordes de un elemento.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí
- Se aplica a: todos los elementos
- {{ Cssxref("inheritance", "Herencia") }}: no
- Percentages: N/A
- Medio: {{ Cssxref("Media:Visual", "visual") }}
- {{ Cssxref("computed value", "Valor calculada") }}: el valor del color
por defecto, o lo que se especificó.
-
-
-Sintaxis
-
-border-color: [ <color> || transparent ]{1,4} | inherit
-
-
-Valores
-
-
- <color>
- el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.
-
-
-
- transparent
- el borde no aparece pero ocupa el sitio definido.
-
-
-Se pueden pasar hasta cuatro valores;
-
-Con un color, los cuatro lados tendrán el mismo.
- Con dos colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.
- Con tres colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
- Con cuatro colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-element {
- border-width: 1px;
- border-style: solid;
- border-color: black;
-}
-
-
-Notas
-
-Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (diferente de none o hidden
)
-
-Especificaciones
-
-
-
-Compatibilidad
-
-
-
-
- Navegadores
- Versión mínima
-
-
- Internet Explorer
- 4
-
-
- Firefox
- 1
-
-
- Netscape
- 4
-
-
- Opera
- 3.5
-
-
-
-
-Extensiones Mozilla
-
-La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.
-
-
- {{ Cssxref("-moz-border-bottom-colors") }}
- {{ Cssxref("-moz-border-left-colors") }}
- {{ Cssxref("-moz-border-right-colors") }}
- {{ Cssxref("-moz-border-top-colors") }}
-
-
-Ver también
-
-{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}
diff --git a/files/es/web/css/border-color/index.md b/files/es/web/css/border-color/index.md
new file mode 100644
index 00000000000000..974d9be45a5df3
--- /dev/null
+++ b/files/es/web/css/border-color/index.md
@@ -0,0 +1,88 @@
+---
+title: border-color
+slug: Web/CSS/border-color
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-color
+---
+{{ PreviousNext("CSS:border", "CSS:border-style") }}
+
+### Resumen
+
+la propiedad `border-color` es un atajo para definir el color de los cuatro bordes de un elemento.
+
+- {{ Cssxref("initial", "Valor inicial") }}: el {{ Cssxref("color") }} del elemento en sí
+- Se aplica a: todos los elementos
+- {{ Cssxref("inheritance", "Herencia") }}: no
+- Percentages: N/A
+- Medio: {{ Cssxref("Media:Visual", "visual") }}
+- {{ Cssxref("computed value", "Valor calculada") }}: el valor del `color` por defecto, o lo que se especificó.
+
+### Sintaxis
+
+```
+border-color: [ || transparent ]{1,4} | inherit
+```
+
+### Valores
+
+- \
+ - : el color se puede especificar con un valor RGB hexa-decimal o regular, o con el nombre predefinido de ese color.
+
+
+
+- transparent
+ - : el borde no aparece pero ocupa el sitio definido.
+
+Se pueden pasar hasta cuatro valores;
+
+Con **un** color, los cuatro lados tendrán el mismo.
+Con **dos** colores, los lados de arriba y abajo utilizan el primer valor y los izquierda y derecha el segundo.
+Con **tres** colores, el primero para arriba, el segundo para izquierda y derecha y el tercero para abajo.
+Con **cuatro** colores, el primero para arriba, el segundo para la derecha, el tercero para abajo y el cuarto para la izquierda.
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border.html)
+
+```
+element {
+ border-width: 1px;
+ border-style: solid;
+ border-color: black;
+}
+```
+
+### Notas
+
+Para poder ver el/los bordes también hay que definir {{ Cssxref("border-width", "el ancho") }} con un valor positivo y {{ Cssxref("border-style", "el estilo") }} con algo visible. (_diferente de `none o hidden`_)
+
+### Especificaciones
+
+- [CSS 1](http://www.w3.org/TR/CSS1#border-color)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-color-properties)
+- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-color)
+
+### Compatibilidad
+
+| Navegadores | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 4 |
+| Firefox | 1 |
+| Netscape | 4 |
+| Opera | 3.5 |
+
+### Extensiones Mozilla
+
+La siguientes extensiones definen los múltiples colores de los respectivos bordes en los navegadores Gecko.
+
+- {{ Cssxref("-moz-border-bottom-colors") }}
+- {{ Cssxref("-moz-border-left-colors") }}
+- {{ Cssxref("-moz-border-right-colors") }}
+- {{ Cssxref("-moz-border-top-colors") }}
+
+### Ver también
+
+{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}
diff --git a/files/es/web/css/border-end-end-radius/index.html b/files/es/web/css/border-end-end-radius/index.html
deleted file mode 100644
index 63124941ef0f1f..00000000000000
--- a/files/es/web/css/border-end-end-radius/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-end-end-radius
-slug: Web/CSS/border-end-end-radius
-translation_of: Web/CSS/border-end-end-radius
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-end-end-radius
define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <length> values */
-/* With one value the corner will be a circle */
-border-end-end-radius: 10px;
-border-end-end-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-end-end-radius: 1em 2em;
-
-/* Global values */
-border-end-end-radius: inherit;
-border-end-end-radius: initial;
-border-end-end-radius: unset;
-
-
-Por ejemplo, en un modo de escritura horizontal-tb
, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.
-
-Sintaxis
-
-Valores
-
-
- <length-percentage>
- Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
-
-
-
-
-{{CSSSyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: rebeccapurple;
- width: 120px;
- height: 120px;
- border-end-end-radius: 10px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- padding: 10px;
- background-color: #fff;
- border-end-end-radius: 10px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-{{CSSInfo}}
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-end-end-radius")}}
-
-Mira también
-
-
- La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}
- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
-
diff --git a/files/es/web/css/border-end-end-radius/index.md b/files/es/web/css/border-end-end-radius/index.md
new file mode 100644
index 00000000000000..8d05729e4bc46d
--- /dev/null
+++ b/files/es/web/css/border-end-end-radius/index.md
@@ -0,0 +1,83 @@
+---
+title: border-end-end-radius
+slug: Web/CSS/border-end-end-radius
+translation_of: Web/CSS/border-end-end-radius
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-end-end-radius`** define un radio de borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* values */
+/* With one value the corner will be a circle */
+border-end-end-radius: 10px;
+border-end-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-end-radius: 1em 2em;
+
+/* Global values */
+border-end-end-radius: inherit;
+border-end-end-radius: initial;
+border-end-end-radius: unset;
+```
+
+Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-right-radius")}}.
+
+## Sintaxis
+
+### Valores
+
+- ``
+ - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
+
+### Sintaxis formal
+
+{{CSSSyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: rebeccapurple;
+ width: 120px;
+ height: 120px;
+ border-end-end-radius: 10px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ padding: 10px;
+ background-color: #fff;
+ border-end-end-radius: 10px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-end-end-radius", "border-end-end-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+{{CSSInfo}}
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-end-end-radius")}}
+
+## Mira también
+
+- La propiedad física asignada: {{CSSxRef("border-bottom-right-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/es/web/css/border-end-start-radius/index.html b/files/es/web/css/border-end-start-radius/index.html
deleted file mode 100644
index 8341ce4b933b59..00000000000000
--- a/files/es/web/css/border-end-start-radius/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-end-start-radius
-slug: Web/CSS/border-end-start-radius
-translation_of: Web/CSS/border-end-start-radius
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-end-start-radius
define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <length> values */
-/* With one value the corner will be a circle */
-border-end-start-radius: 10px;
-border-end-start-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-end-start-radius: 1em 2em;
-
-/* Global values */
-border-end-start-radius: inherit;
-border-end-start-radius: initial;
-border-end-start-radius: unset;
-
-
-Por ejemplo, en un modo de escritura horizontal-tb
, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.
-
-Sintaxis
-
-Valores
-
-
- <length-percentage>
- Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
-
-
-
-
-{{CSSSyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: rebeccapurple;
- width: 120px;
- height: 120px;
- border-end-start-radius: 10px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- padding: 10px;
- background-color: #fff;
- border-end-start-radius: 10px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-{{CSSInfo}}
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-end-start-radius")}}
-
-Mira también
-
-
- La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}
- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
-
diff --git a/files/es/web/css/border-end-start-radius/index.md b/files/es/web/css/border-end-start-radius/index.md
new file mode 100644
index 00000000000000..a436127c3d3246
--- /dev/null
+++ b/files/es/web/css/border-end-start-radius/index.md
@@ -0,0 +1,83 @@
+---
+title: border-end-start-radius
+slug: Web/CSS/border-end-start-radius
+translation_of: Web/CSS/border-end-start-radius
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-end-start-radius`** define un radio del borde lógico en un elemento, que se asigna a un radio de borde físico que depende de los elementos {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* values */
+/* With one value the corner will be a circle */
+border-end-start-radius: 10px;
+border-end-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-end-start-radius: 1em 2em;
+
+/* Global values */
+border-end-start-radius: inherit;
+border-end-start-radius: initial;
+border-end-start-radius: unset;
+```
+
+Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-right-radius")}}.
+
+## Sintaxis
+
+### Valores
+
+- ``
+ - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
+
+### Sintaxis formal
+
+{{CSSSyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: rebeccapurple;
+ width: 120px;
+ height: 120px;
+ border-end-start-radius: 10px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ padding: 10px;
+ background-color: #fff;
+ border-end-start-radius: 10px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-end-start-radius", "border-end-start-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+{{CSSInfo}}
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-end-start-radius")}}
+
+## Mira también
+
+- La propiedad física asignada: {{CSSxRef("border-top-right-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/es/web/css/border-image-outset/index.html b/files/es/web/css/border-image-outset/index.html
deleted file mode 100644
index b155585c577946..00000000000000
--- a/files/es/web/css/border-image-outset/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: border-image-outset
-slug: Web/CSS/border-image-outset
-tags:
- - Bordes CSS
- - CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-image-outset
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad border-image-outset
describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.
-
-Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.
-
-{{cssinfo}}
-
-Sintaxis
-
-/* border-image-outset: sides */
-border-image-outset: 1.5;
-
-/* border-image-outset: vertical horizontal */
-border-image-outset: 1 1.2;
-
-/* border-image-outset: top horizontal bottom */
-border-image-outset: 30px 2 45px;
-
-/* border-image-outset: top right bottom left */
-border-image-outset: 7px 12px 14px 5px;
-
-border-image-outset: inherit;
-
-
-Valores
-
-
-
Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de border-image-outset
. Los valores negativos no son permitidos.
-
-
-
- sides
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.
- horizontal
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).
- vertical
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).
- top
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.
- bottom
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.
- right
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.
- left
- Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.
- inherit
- Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.
-
-
-
-
-{{csssyntax}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-image-outset")}}
diff --git a/files/es/web/css/border-image-outset/index.md b/files/es/web/css/border-image-outset/index.md
new file mode 100644
index 00000000000000..bf89f3c10b97b1
--- /dev/null
+++ b/files/es/web/css/border-image-outset/index.md
@@ -0,0 +1,72 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+tags:
+ - Bordes CSS
+ - CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-image-outset
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad **`border-image-outset`** describe el monto por el cual se extenderá la imagen de borde más allá del límite de la caja.
+
+Las porciones de la imagen de borde que se dibujen fuera de los límites de la caja como resultado de esta propiedad no provocarán desplazamiento del contenido. Estas áreas tampoco capturarán o causarán que ocurran eventos del ratón con referencia al elemento al que pertenecen.
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* border-image-outset: sides */
+border-image-outset: 1.5;
+
+/* border-image-outset: vertical horizontal */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: top horizontal bottom */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: top right bottom left */
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-outset: inherit;
+```
+
+### Valores
+
+> **Nota:** Cuando un valor se especifica como valor {{cssxref("<number>")}} sin unidad, el valor es multiplicado por el {{cssxref("border-width")}} calculado correspondiente, para determinar el valor de `border-image-outset`. Los valores negativos no son permitidos.
+
+- _sides_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en las cuatro direcciones.
+- _horizontal_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones horizontales (izquierda y derecha).
+- _vertical_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá de los límites de la caja, en sus direcciones verticales (superior e inferior).
+- _top_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde superior de la caja.
+- _bottom_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde inferior de la caja.
+- _right_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde derecho de la caja.
+- _left_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<number>")}} para la cantidad en la que se extiende la imagen de borde más allá del límite del borde izquierdo de la caja.
+- `inherit`
+ - : Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de sus elementos padre.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Especificaciones
+
+| Especificación | Estatus | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-image-outset")}}
diff --git a/files/es/web/css/border-image-repeat/index.html b/files/es/web/css/border-image-repeat/index.html
deleted file mode 100644
index f9812c6e79626a..00000000000000
--- a/files/es/web/css/border-image-repeat/index.html
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: border-image-repeat
-slug: Web/CSS/border-image-repeat
-tags:
- - Bordes CSS
- - CSS
- - Propiedades CSS
- - Referencia
-translation_of: Web/CSS/border-image-repeat
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad CSS border-image-repeat
define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.
-
-{{cssinfo}}
-
-Sintaxis
-
-/* border-image-repeat: type */
-border-image-repeat: stretch;
-
-/* border-image-repeat: horizontal vertical */
-border-image-repeat: round stretch;
-
-/* Global values */
-border-image-repeat: inherit;
-border-image-repeat: initial;
-border-image-repeat: unset;
-
-
-Valores
-
-
- type
- Puede ser stretch
, repeat
, o round
, que denotan cómo será tratada la imagen vertical y horizontalmente.
- horizontal
- Puede ser stretch
, repeat
, o round
, denotando cómo será tratada la imagen horizontalmente.
- vertical
- Puede ser stretch
, repeat
, o round
, denotando cómo será tratada la imagen verticalmente.
- stretch
- Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.
- repeat
- Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.
- round
- Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.
- space
- La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido CSS
-
-#borderImageRepetition {
- width: 260px;
- height: 80px;
- margin-bottom: 10px;
- border: 30px solid;
- border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
- border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
-}
-
-
-
-
Contenido HTML
-
-
<div id="borderImageRepetition">
-</div>
-<select id="repetition">
- <option value="stretch">stretch</option>
- <option value="repeat">repeat</option>
- <option value="round">round</option>
- <option value="space">space</option>
- <option value="stretch repeat">stretch repeat</option>
- <option value="space round">space round</option>
-</select>
-
-
-
Contenido JavaScript
-
-
var repetition = document.getElementById("repetition");
-repetition.addEventListener("change", function (evt) {
- document.getElementById("borderImageRepetition").style.borderImageRepeat = evt.target.value;
-});
-
-
-
-{{EmbedLiveSample("Example", "330px", "180px")}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-image-repeat")}}
-
-Véase también
-
-
diff --git a/files/es/web/css/border-image-repeat/index.md b/files/es/web/css/border-image-repeat/index.md
new file mode 100644
index 00000000000000..bfd1abee2cd882
--- /dev/null
+++ b/files/es/web/css/border-image-repeat/index.md
@@ -0,0 +1,104 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+tags:
+ - Bordes CSS
+ - CSS
+ - Propiedades CSS
+ - Referencia
+translation_of: Web/CSS/border-image-repeat
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad CSS **`border-image-repeat`** define cómo se manejará la parte media de una imagen de borde para que coincida con el tamaño del borde. Tiene sintaxis de un valor, el cual describe el comportamiento de todos los lados, y otra sintaxis de dos valores, que establece diferentes valores para el comportamiento horizontal y vertical.
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* border-image-repeat: type */
+border-image-repeat: stretch;
+
+/* border-image-repeat: horizontal vertical */
+border-image-repeat: round stretch;
+
+/* Global values */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+```
+
+### Valores
+
+- _type_
+ - : Puede ser `stretch`, `repeat`, o `round`, que denotan cómo será tratada la imagen vertical y horizontalmente.
+- _horizontal_
+ - : Puede ser `stretch`, `repeat`, o `round`, denotando cómo será tratada la imagen horizontalmente.
+- _vertical_
+ - : Puede ser `stretch`, `repeat`, o `round`, denotando cómo será tratada la imagen verticalmente.
+- `stretch`
+ - : Palabra clave que indica que la imagen deberá ser estirada para cubrir el espacio entre dos bordes.
+- `repeat`
+ - : Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes.
+- `round`
+ - : Palabra clave que indica que la imagen debe ser repetida hasta que cubra el espacio entre dos bordes. Si la imagen no se ajusta después de repetirse un número íntegro de veces, la imagen es escalada para ajustarse.
+- `space`
+ - : La imagen es repetida hasta cubrir el área del elemento. Si no se cubre el área completa con un número de imágenes, el espacio extra es distribuido al rededor de éstas.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido CSS
+
+```css
+#borderImageRepetition {
+ width: 260px;
+ height: 80px;
+ margin-bottom: 10px;
+ border: 30px solid;
+ border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+ border-image-repeat: stretch; /* Puede ser modificado en el ejemplo en vivo */
+}
+```
+
+```html hidden
+
+
+
+ stretch
+ repeat
+ round
+ space
+ stretch repeat
+ space round
+
+```
+
+```js hidden
+var repetition = document.getElementById("repetition");
+repetition.addEventListener("change", function (evt) {
+ document.getElementById("borderImageRepetition").style.borderImageRepeat = evt.target.value;
+});
+```
+
+{{EmbedLiveSample("Example", "330px", "180px")}}
+
+## Especificaciones
+
+| Especificación | Estatus | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-image-repeat")}}
+
+## Véase también
+
+- [css-tricks border-image](https://css-tricks.com/almanac/properties/b/border-image/)
diff --git a/files/es/web/css/border-image-slice/index.html b/files/es/web/css/border-image-slice/index.html
deleted file mode 100644
index 48c0e35af11f0f..00000000000000
--- a/files/es/web/css/border-image-slice/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: border-image-slice
-slug: Web/CSS/border-image-slice
-tags:
- - Bordes CSS
- - CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-image-slice
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad CSS border-image-slice
divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.
-
- Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.
-
-La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave fill
. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).
-
-Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.
-
-La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.
-
-{{cssinfo}}
-
-Sintaxis
-
-/* border-image-slice: slice */
-border-image-slice: 30%;
-
-/* border-image-slice: horizontal vertical */
-border-image-slice: 10% 30%;
-
-/* border-image-slice: top horizontal bottom */
-border-image-slice: 30 30% 45;
-
-/* border-image-slice: top right bottom left */
-border-image-slice: 7 12 14 5;
-
-/* border-image-slice: … fill */
-/* The fill value can be placed between any value */
-border-image-slice: 10% fill 7 12;
-
-/* Global values */
-border-image-slice: inherit;
-border-image-slice: initial;
-border-image-slice: unset;
-
-
-Valores
-
-
- slice
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a 100%
.
- horizontal
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%
.
- vertical
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%
.
- top
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%
.
- bottom
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%
.
- right
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%
.
- left
- Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa píxeles para imágenes de mapa de bits y coordenadas para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a 100%
.
- fill
- Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
- inherit
- Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.
-
-
-
-
-{{csssyntax}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-image-slice")}}
-
-Véase también
-
-
diff --git a/files/es/web/css/border-image-slice/index.md b/files/es/web/css/border-image-slice/index.md
new file mode 100644
index 00000000000000..20bdad5d3a78ab
--- /dev/null
+++ b/files/es/web/css/border-image-slice/index.md
@@ -0,0 +1,89 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+tags:
+ - Bordes CSS
+ - CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-image-slice
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad CSS **`border-image-slice`** divide la imagen especificada por {{cssxref("border-image-source")}} en nueve regiones: las cuatro esquinas, los cuatro bordes y el espacio enmedio. Esto se hace especificando cuatro desplazamientos hacia adentro.
+
+[![The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties](/files/3814/border-image-slice.png)](/files/3814/border-image-slice.png)Cuatro valores controlan la posición de las líneas de corte. Si algunas no son especificada, se infieren de las otras, con la sintaxis común de cuatro valores de CSS.
+
+La región media no es usada por el borde en sí, pero sí se usa como imagen de fondo si se establece la palabra clave `fill`. Se puede establecer este valor en cualquier posición en la propiedad (antes, después o entre los otros valores).
+
+Las propiedades {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}} y {{cssxref("border-image-outset")}} definen cómo se usarán estas imágenes.
+
+La propiedad abreviada {{cssxref("border-image")}} podría restaurar esta propiedad a su valor predeterminado.
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertical */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: top horizontal bottom */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: top right bottom left */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Global values */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+```
+
+### Valores
+
+- _slice_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las cuatro líneas de corte. Un valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inváildos, y valores mayores al tamaño relevante, anchura o altura, son restringidos a `100%`.
+- _horizontal_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte horizontales, la superior y la inferior. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`.
+- _vertical_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de las dos líneas de corte verticales, la izquierda y la derecha. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`.
+- _top_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte superior. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`.
+- _bottom_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte inferior. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`.
+- _right_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte derecha. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`.
+- _left_
+ - : Es un valor {{cssxref("<number>")}} o {{cssxref("<percentage>")}} de la separación de la línea de corte izquierda. El valor {{cssxref("<number>")}} representa _píxeles_ para imágenes de mapa de bits y _coordenadas_ para imágenes vectoriales. A su vez, los valores {{cssxref("<percentage>")}} son relativos a la altura o anchura de la imagen, según sea más adecuado. Valores negativos son inválidos, y valores mayores al tamaño relevante, altura o anchura, son restringidos a `100%`.
+- `fill`
+ - : Es una palabra clave cuya presencia forza que la región media de la imagen sea mostrada sobre la imagen de fondo; su tamaño y altura son redimensionados acorde a los fragmentos superior e izquierdo, respectivamente.
+- `inherit`
+ - : Es una palabra clave que indica que los cuatro valores serán heredados de los valores calculados de su elemento padre.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Especificaciones
+
+| Especificación | Estatus | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-image-slice")}}
+
+## Véase también
+
+- [Illustrated description of the 1-to-4-value syntax](/es/docs/Web/CSS/Shorthand_properties#Tricky_edge_cases)
diff --git a/files/es/web/css/border-image/index.html b/files/es/web/css/border-image/index.html
deleted file mode 100644
index b2309297a7ffed..00000000000000
--- a/files/es/web/css/border-image/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-image
-slug: Web/CSS/border-image
-tags:
- - CSS
- - CSS Borders
- - CSS Property
- - Reference
-translation_of: Web/CSS/border-image
----
-{{CSSRef("CSS Borders")}}
-
-Resumen
-
-La propiedad de CSS border-image
permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.
-
-La propiedad border-image
es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad border-image-source
o la abreviatura border-image
, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.
-
-{{cssinfo}}
-
-Sintaxis
-
-Etiquetado formal : {{csssyntax("border-image")}}
-
-Valores
-
-A continuación vea las respectivas propiedades para los diferentes valores.
-
-Ejemplos
-
-Bitmap repeated (repeat)
-
-La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.
-
-.example {
- border: 30px solid transparent;
- -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
- -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
- -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
- border-image:url("/files/4127/border.png") 30 30 repeat;
-}
-
-
-Resultado:
-
-
-Bitmap repeated (round)
-
-La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.
-
-.example {
- border: 30px solid transparent;
- -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
- -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
- -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
- border-image:url("/files/4127/border.png") 30 30 round;
-}
-
-Resultado:
-
-
-Bitmap stretched
-
-La opción 'stretch' estira la imágen para rellenar todo el borde del área
-
-.example {
- border: 30px solid transparent;
- -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
- -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
- -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
- border-image:url("/files/4127/border.png") 30 30 stretch;
-}
-
-Resultado:
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}
- {{Spec2('CSS3 Backgrounds')}}
-
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-image")}}
diff --git a/files/es/web/css/border-image/index.md b/files/es/web/css/border-image/index.md
new file mode 100644
index 00000000000000..a8bf2aba2eb0ad
--- /dev/null
+++ b/files/es/web/css/border-image/index.md
@@ -0,0 +1,92 @@
+---
+title: border-image
+slug: Web/CSS/border-image
+tags:
+ - CSS
+ - CSS Borders
+ - CSS Property
+ - Reference
+translation_of: Web/CSS/border-image
+---
+{{CSSRef("CSS Borders")}}
+
+## Resumen
+
+La propiedad de CSS `border-image` permite utilizar una imágen para definir los bordes de los elementos. Esto hace que dibujarlos sea más simple y elimina la necesidad de utilizar muchas cajas en algunos casos.
+
+La propiedad `border-image` es usada en lugar de la sentencia {{cssxref("border-style")}}. Por eso es muy importante tener en cuenta el valor dado por la sentencia {{cssxref("border-image-source")}}, que se puede establecer ya sea por la propiedad `border-image-source` o la abreviatura `border-image`, en caso de que su valor sea nulo (none), o si la imágen no se puede visualizar, se utilizarán los estilos de borde.
+
+{{cssinfo}}
+
+## Sintaxis
+
+```
+Etiquetado formal: {{csssyntax("border-image")}}
+```
+
+### Valores
+
+A continuación vea las respectivas propiedades para los diferentes valores.
+
+## Ejemplos
+
+### Bitmap repeated (repeat)
+
+La imágen es cortada para rellenar el area del borde, repitiendose si es necesario.
+
+```css
+.example {
+ border: 30px solid transparent;
+ -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+ -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+ -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+ border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+```
+
+Resultado:
+![border image repeat demo](/files/4129/repeat.png)
+
+### Bitmap repeated (round)
+
+La opción 'round' es una variación de la opción 'repeat', la cual distribuye las partes de tal manera que los extremos se conecten bién.
+
+```css
+.example {
+ border: 30px solid transparent;
+ -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+ -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+ -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+ border-image:url("/files/4127/border.png") 30 30 round;
+}
+```
+
+Resultado:
+![border image round demo](/files/4131/round.png)
+
+### Bitmap stretched
+
+La opción 'stretch' estira la imágen para rellenar todo el borde del área
+
+```css
+.example {
+ border: 30px solid transparent;
+ -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+ -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+ -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+ border-image:url("/files/4127/border.png") 30 30 stretch;
+}
+```
+
+Resultado:
+![border image stretch demo](/files/4133/stretch.png)
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- |
+| {{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}} | {{Spec2('CSS3 Backgrounds')}} | |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-image")}}
diff --git a/files/es/web/css/border-inline-color/index.html b/files/es/web/css/border-inline-color/index.html
deleted file mode 100644
index 231cae2c497323..00000000000000
--- a/files/es/web/css/border-inline-color/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: border-inline-color
-slug: Web/CSS/border-inline-color
-translation_of: Web/CSS/border-inline-color
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-color
define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-border-inline-color: yellow;
-border-inline-color: #F5F6F7;
-
-
-El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 10px solid blue;
- border-inline-color: red;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-color")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
-
diff --git a/files/es/web/css/border-inline-color/index.md b/files/es/web/css/border-inline-color/index.md
new file mode 100644
index 00000000000000..02dc5bdfd231e8
--- /dev/null
+++ b/files/es/web/css/border-inline-color/index.md
@@ -0,0 +1,71 @@
+---
+title: border-inline-color
+slug: Web/CSS/border-inline-color
+translation_of: Web/CSS/border-inline-color
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-color`** define el color del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+border-inline-color: yellow;
+border-inline-color: #F5F6F7;
+```
+
+El color del borde en otra dimensión puede establecerse con {{cssxref("border-block-color")}} que establece {{cssxref("border-block-start-color")}}, y {{cssxref("border-block-end-color")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 10px solid blue;
+ border-inline-color: red;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-color", "border-inline-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-color")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}+ bug 1297097
diff --git a/files/es/web/css/border-inline-end-color/index.html b/files/es/web/css/border-inline-end-color/index.html
deleted file mode 100644
index daf18d59ddf4de..00000000000000
--- a/files/es/web/css/border-inline-end-color/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: border-inline-end-color
-slug: Web/CSS/border-inline-end-color
-translation_of: Web/CSS/border-inline-end-color
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-end-color
CSS property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
-
-
-
-Sintaxis
-
-border-inline-end-color: rebeccapurple;
-border-inline-end-color: #663399;
-
-
-Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 10px solid blue;
- border-inline-end-color: red;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-end-color")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-end-color/index.md b/files/es/web/css/border-inline-end-color/index.md
new file mode 100644
index 00000000000000..de07aed0854c50
--- /dev/null
+++ b/files/es/web/css/border-inline-end-color/index.md
@@ -0,0 +1,73 @@
+---
+title: border-inline-end-color
+slug: Web/CSS/border-inline-end-color
+translation_of: Web/CSS/border-inline-end-color
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end-color`** [CSS](/es/docs/Web/CSS) property defines the color of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-inline-end-color.html")}}
+
+## Sintaxis
+
+```css
+border-inline-end-color: rebeccapurple;
+border-inline-end-color: #663399;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-start-color")}}, que definen los otros colores del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 10px solid blue;
+ border-inline-end-color: red;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-color", "border-inline-end-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-end-color")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-end-style/index.html b/files/es/web/css/border-inline-end-style/index.html
deleted file mode 100644
index 1b4afaae4fdfe8..00000000000000
--- a/files/es/web/css/border-inline-end-style/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: border-inline-end-style
-slug: Web/CSS/border-inline-end-style
-translation_of: Web/CSS/border-inline-end-style
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-end-style
CSS property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
-
-
-
-Sintaxis
-
-/* <'border-style'> values */
-border-inline-end-style: dashed;
-border-inline-end-style: dotted;
-border-inline-end-style: groove;
-
-
-Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-style'>
- La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 5px solid blue;
- border-inline-end-style: dashed;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-end-style")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-end-style/index.md b/files/es/web/css/border-inline-end-style/index.md
new file mode 100644
index 00000000000000..1908e29153fbdf
--- /dev/null
+++ b/files/es/web/css/border-inline-end-style/index.md
@@ -0,0 +1,75 @@
+---
+title: border-inline-end-style
+slug: Web/CSS/border-inline-end-style
+translation_of: Web/CSS/border-inline-end-style
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end-style`** [CSS](/es/docs/Web/CSS) property defines the style of the logical inline end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-inline-end-style.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-style'> values */
+border-inline-end-style: dashed;
+border-inline-end-style: dotted;
+border-inline-end-style: groove;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, and {{cssxref("border-inline-start-style")}}, que definen los otros estilos del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 5px solid blue;
+ border-inline-end-style: dashed;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-style", "border-inline-end-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-end-style")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-end-width/index.html b/files/es/web/css/border-inline-end-width/index.html
deleted file mode 100644
index 6f0ca0e79dc650..00000000000000
--- a/files/es/web/css/border-inline-end-width/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: border-inline-end-width
-slug: Web/CSS/border-inline-end-width
-translation_of: Web/CSS/border-inline-end-width
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-end-width
CSS property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
-
-
-
-Sintaxis
-
-/* <'border-width'> values */
-border-inline-end-width: 2px;
-border-inline-end-width: thick;
-
-
-Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-width'>
- El ancho del borde. Mira {{ cssxref("border-width") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 1px solid blue;
- border-inline-end-width: 5px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-end-width")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-end-width/index.md b/files/es/web/css/border-inline-end-width/index.md
new file mode 100644
index 00000000000000..feceb56ee65155
--- /dev/null
+++ b/files/es/web/css/border-inline-end-width/index.md
@@ -0,0 +1,74 @@
+---
+title: border-inline-end-width
+slug: Web/CSS/border-inline-end-width
+translation_of: Web/CSS/border-inline-end-width
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end-width`** [CSS](/es/docs/Web/CSS) property defines the width of the logical inline-end border of an element, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-inline-end-width.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-width'> values */
+border-inline-end-width: 2px;
+border-inline-end-width: thick;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-start-width")}}, que definen los otros anchos del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 1px solid blue;
+ border-inline-end-width: 5px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end-width", "border-inline-end-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-end-width")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-end/index.html b/files/es/web/css/border-inline-end/index.html
deleted file mode 100644
index 028860cda7d0b4..00000000000000
--- a/files/es/web/css/border-inline-end/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-inline-end
-slug: Web/CSS/border-inline-end
-translation_of: Web/CSS/border-inline-end
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-end
es una propiedad abreviada para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos.
-
-{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
-
-
-
-Sintaxis
-
-border-inline-end: 1px;
-border-inline-end: 2px dashed;
-border-inline-end: medium dashed blue;
-
-
-border-inline-end
puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.
-
-{{cssinfo}}
-
-Valores
-
-El border-inline-end
es especificado con uno o más de los siguientes valores, en cualquier orden:
-
-
- <'border-width'>
- El ancho del borde. Mira {{cssxref("border-width")}}.
- <'border-style'>
- La línea de estilo del borde. Mira {{cssxref("border-style")}}.
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- border-inline-end: 5px dashed blue;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-end")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-end/index.md b/files/es/web/css/border-inline-end/index.md
new file mode 100644
index 00000000000000..9e0b4b489e726c
--- /dev/null
+++ b/files/es/web/css/border-inline-end/index.md
@@ -0,0 +1,81 @@
+---
+title: border-inline-end
+slug: Web/CSS/border-inline-end
+translation_of: Web/CSS/border-inline-end
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-end`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde en línea final en un solo lugar en la hoja de estilos.
+
+{{EmbedInteractiveExample("pages/css/border-inline-end.html")}}
+
+## Sintaxis
+
+```css
+border-inline-end: 1px;
+border-inline-end: 2px dashed;
+border-inline-end: medium dashed blue;
+```
+
+`border-inline-end` puede ser usado para establecer los valores de uno o más de {{cssxref("border-inline-end-width")}}, {{cssxref("border-inline-end-style")}}, y {{cssxref("border-inline-end-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-start")}}, que definen los otros bordes del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+El `border-inline-end` es especificado con uno o más de los siguientes valores, en cualquier orden:
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{cssxref("border-width")}}.
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ border-inline-end: 5px dashed blue;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-end", "border-inline-end")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-end")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-start-color/index.html b/files/es/web/css/border-inline-start-color/index.html
deleted file mode 100644
index 40fc1d68d2dfe1..00000000000000
--- a/files/es/web/css/border-inline-start-color/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: border-inline-start-color
-slug: Web/CSS/border-inline-start-color
-translation_of: Web/CSS/border-inline-start-color
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-start-color
define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
-
-
-
-Sintaxis
-
-border-inline-start-color: red;
-border-inline-start-color: #ee4141;
-
-
-Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 10px solid blue;
- border-inline-start-color: red;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-start-color")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-start-color/index.md b/files/es/web/css/border-inline-start-color/index.md
new file mode 100644
index 00000000000000..d73c7eaaedebdd
--- /dev/null
+++ b/files/es/web/css/border-inline-start-color/index.md
@@ -0,0 +1,73 @@
+---
+title: border-inline-start-color
+slug: Web/CSS/border-inline-start-color
+translation_of: Web/CSS/border-inline-start-color
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start-color`** define el color del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-color")}} y {{cssxref("border-bottom-color")}}, o {{cssxref("border-left-color")}}, y {{cssxref("border-right-color")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-inline-start-color.html")}}
+
+## Sintaxis
+
+```css
+border-inline-start-color: red;
+border-inline-start-color: #ee4141;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, y {{cssxref("border-inline-end-color")}}, que define los otros colores del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 10px solid blue;
+ border-inline-start-color: red;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-color", "border-inline-start-color")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-start-color")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, y {{cssxref("border-left-color")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-start-style/index.html b/files/es/web/css/border-inline-start-style/index.html
deleted file mode 100644
index 138a28e16d09f1..00000000000000
--- a/files/es/web/css/border-inline-start-style/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: border-inline-start-style
-slug: Web/CSS/border-inline-start-style
-translation_of: Web/CSS/border-inline-start-style
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-start-style
define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
-
-
-
-Sintaxis
-
-/* <'border-style'> values */
-border-inline-start-style: dashed;
-border-inline-start-style: dotted;
-border-inline-start-style: groove;
-
-
-Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-style'>
- La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 5px solid blue;
- border-inline-start-style: dashed;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-start-style")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-start-style/index.md b/files/es/web/css/border-inline-start-style/index.md
new file mode 100644
index 00000000000000..613aec90a50811
--- /dev/null
+++ b/files/es/web/css/border-inline-start-style/index.md
@@ -0,0 +1,75 @@
+---
+title: border-inline-start-style
+slug: Web/CSS/border-inline-start-style
+translation_of: Web/CSS/border-inline-start-style
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start-style`** define el estilo del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-inline-start-style.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-style'> values */
+border-inline-start-style: dashed;
+border-inline-start-style: dotted;
+border-inline-start-style: groove;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-start-style")}}, {{cssxref("border-block-end-style")}}, y {{cssxref("border-inline-end-style")}}, que definen los otros estilos del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 5px solid blue;
+ border-inline-start-style: dashed;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-style", "border-inline-start-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-start-style")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-start-width/index.html b/files/es/web/css/border-inline-start-width/index.html
deleted file mode 100644
index 1cc63c10dc604a..00000000000000
--- a/files/es/web/css/border-inline-start-width/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: border-inline-start-width
-slug: Web/CSS/border-inline-start-width
-translation_of: Web/CSS/border-inline-start-width
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-start-width
define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
-
-
-
-Sintaxis
-
-/* <'border-width'> values */
-border-inline-start-width: 5px;
-border-inline-start-width: thick;
-
-
-Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.
-
-{{cssinfo}}
-
-Valores
-
-
- <'border-width'>
- El ancho del borde. Mira {{ cssxref("border-width") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 1px solid blue;
- border-inline-start-width: 5px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-start-width")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-start-width/index.md b/files/es/web/css/border-inline-start-width/index.md
new file mode 100644
index 00000000000000..fa73624d72da72
--- /dev/null
+++ b/files/es/web/css/border-inline-start-width/index.md
@@ -0,0 +1,74 @@
+---
+title: border-inline-start-width
+slug: Web/CSS/border-inline-start-width
+translation_of: Web/CSS/border-inline-start-width
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start-width`** define el ancho del borde lógico inicial en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+{{EmbedInteractiveExample("pages/css/border-inline-start-width.html")}}
+
+## Sintaxis
+
+```css
+/* <'border-width'> values */
+border-inline-start-width: 5px;
+border-inline-start-width: thick;
+```
+
+Propiedades relacionadas son {{cssxref("border-block-start-width")}}, {{cssxref("border-block-end-width")}}, and {{cssxref("border-inline-end-width")}}, que definen los otros anchos del borde del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 1px solid blue;
+ border-inline-start-width: 5px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start-width", "border-inline-start-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-start-width")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-start/index.html b/files/es/web/css/border-inline-start/index.html
deleted file mode 100644
index d8dace0954b987..00000000000000
--- a/files/es/web/css/border-inline-start/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-inline-start
-slug: Web/CSS/border-inline-start
-translation_of: Web/CSS/border-inline-start
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-start
es una propiedad abreviada para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.
-
-{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
-
-
-
-Sintaxis
-
-border-inline-start: 1px;
-border-inline-start: 2px dotted;
-border-inline-start: medium dashed green;
-
-
-border-inline-start
es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.
-
-{{cssinfo}}
-
-Valores
-
-El border-inline-start
es especificado con uno o más de los sigueintes valores, en cualquier orden:
-
-
- <'border-width'>
- El ancho del borde. Mira {{cssxref("border-width")}}.
- <'border-style'>
- La línea de estilo del borde. Mira {{cssxref("border-style")}}.
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- border-inline-start: 5px dashed blue;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-start")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-start/index.md b/files/es/web/css/border-inline-start/index.md
new file mode 100644
index 00000000000000..f8646dbf1c0c47
--- /dev/null
+++ b/files/es/web/css/border-inline-start/index.md
@@ -0,0 +1,81 @@
+---
+title: border-inline-start
+slug: Web/CSS/border-inline-start
+translation_of: Web/CSS/border-inline-start
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-start`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores de la propiedad inicial del borde individual en línea en un solo lugar en la hoja de estilos.
+
+{{EmbedInteractiveExample("pages/css/border-inline-start.html")}}
+
+## Sintaxis
+
+```css
+border-inline-start: 1px;
+border-inline-start: 2px dotted;
+border-inline-start: medium dashed green;
+```
+
+`border-inline-start` es especificado con uno o más de {{cssxref("border-inline-start-width")}}, {{cssxref("border-inline-start-style")}}, and {{cssxref("border-inline-start-color")}}. El borde físico al que se mapea depende del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+Propiedades relacionadas son {{cssxref("border-block-start")}}, {{cssxref("border-block-end")}}, and {{cssxref("border-inline-end")}}, que definen los otros bordes del elemento.
+
+{{cssinfo}}
+
+### Valores
+
+El `border-inline-start` es especificado con uno o más de los sigueintes valores, en cualquier orden:
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{cssxref("border-width")}}.
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ border-inline-start: 5px dashed blue;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-start", "border-inline-start")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-start")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-style/index.html b/files/es/web/css/border-inline-style/index.html
deleted file mode 100644
index 4d69915d65759e..00000000000000
--- a/files/es/web/css/border-inline-style/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: border-inline-style
-slug: Web/CSS/border-inline-style
-translation_of: Web/CSS/border-inline-style
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-style
define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <'border-style'> values */
-border-inline-style: dashed;
-border-inline-style: dotted;
-border-inline-style: groove;
-
-
-El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'border-style'>
- La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 5px solid blue;
- border-inline-style: dashed;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline-style")}}
-
-
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-style/index.md b/files/es/web/css/border-inline-style/index.md
new file mode 100644
index 00000000000000..5bdc79c60195d1
--- /dev/null
+++ b/files/es/web/css/border-inline-style/index.md
@@ -0,0 +1,73 @@
+---
+title: border-inline-style
+slug: Web/CSS/border-inline-style
+translation_of: Web/CSS/border-inline-style
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-style`** define el estilo de los bordes lógicos en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-style")}} y {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}, y {{cssxref("border-right-style")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* <'border-style'> values */
+border-inline-style: dashed;
+border-inline-style: dotted;
+border-inline-style: groove;
+```
+
+El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block-style")}}, que establece {{cssxref("border-block-start-style")}}, y {{cssxref("border-block-end-style")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{ cssxref("border-style") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 5px solid blue;
+ border-inline-style: dashed;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline-style", "border-inline-style")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline-style")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, o {{cssxref("border-left-style")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline-width/index.html b/files/es/web/css/border-inline-width/index.html
deleted file mode 100644
index 72d7553ad49e35..00000000000000
--- a/files/es/web/css/border-inline-width/index.html
+++ /dev/null
@@ -1,88 +0,0 @@
----
-title: border-inline-width
-slug: Web/CSS/border-inline-width
-translation_of: Web/CSS/border-inline-width
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline-width
define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <'border-width'> values */
-border-inline-width: 5px 10px;
-border-inline-width: 5px;
-border-inline-width: thick;
-
-
-El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-
- <'border-width'>
- El ancho del borde. Mira {{ cssxref("border-width") }}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-lr;
- border: 1px solid blue;
- border-inline-width: 5px 10px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-block-width")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline-width/index.md b/files/es/web/css/border-inline-width/index.md
new file mode 100644
index 00000000000000..7cc5250222a573
--- /dev/null
+++ b/files/es/web/css/border-inline-width/index.md
@@ -0,0 +1,73 @@
+---
+title: border-inline-width
+slug: Web/CSS/border-inline-width
+translation_of: Web/CSS/border-inline-width
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline-width`** define al ancho del borde lógico en línea de un elemento, que se asigna al estilo de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("border-top-width")}} y {{cssxref("border-bottom-width")}}, o {{cssxref("border-left-width")}}, y {{cssxref("border-right-width")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* <'border-width'> values */
+border-inline-width: 5px 10px;
+border-inline-width: 5px;
+border-inline-width: thick;
+```
+
+El ancho del borde en otra dimensión puede establecerse con {{cssxref("border-block-width")}}, que establece {{cssxref("border-block-start-width")}}, y {{cssxref("border-block-end-width")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{ cssxref("border-width") }}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-lr;
+ border: 1px solid blue;
+ border-inline-width: 5px 10px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-block-width", "border-block-width")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-block-width")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top-width")}}, {{cssxref("border-right-width")}}, {{cssxref("border-bottom-width")}}, y {{cssxref("border-left-width")}}
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-inline/index.html b/files/es/web/css/border-inline/index.html
deleted file mode 100644
index bc8e9fd85c867f..00000000000000
--- a/files/es/web/css/border-inline/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: border-inline
-slug: Web/CSS/border-inline
-translation_of: Web/CSS/border-inline
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-inline
es una propiedad abreviada para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.
-
-border-inline: 1px;
-border-inline: 2px dotted;
-border-inline: medium dashed blue;
-
-
-border-inline
puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.
-
-{{cssinfo}}
-
-Sintaxis
-
-Valores
-
-El border-inline
es especificado con uno o más de los siguientes valores, en cualquier orden:
-
-
- <'border-width'>
- El ancho del borde. Mira {{cssxref("border-width")}}.
- <'border-style'>
- La línea de estilo del borde. Mira {{cssxref("border-style")}}.
- <'color'>
- El color del borde. Mira {{cssxref("color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example text</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: yellow;
- width: 120px;
- height: 120px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- border-inline: 5px dashed blue;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-inline")}}
-
-Mira también
-
-
- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
-
diff --git a/files/es/web/css/border-inline/index.md b/files/es/web/css/border-inline/index.md
new file mode 100644
index 00000000000000..b5b9de4416ba9a
--- /dev/null
+++ b/files/es/web/css/border-inline/index.md
@@ -0,0 +1,79 @@
+---
+title: border-inline
+slug: Web/CSS/border-inline
+translation_of: Web/CSS/border-inline
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-inline`** es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para establecer los valores lógicos individuales del borde de bloque en un solo lugar en la hoja de estilos.
+
+```css
+border-inline: 1px;
+border-inline: 2px dotted;
+border-inline: medium dashed blue;
+```
+
+`border-inline` puede ser usada para establecer los valores de uno o más de {{cssxref("border-inline-width")}}, {{cssxref("border-inline-style")}}, y {{cssxref("border-inline-color")}} estableciendo tanto el inicio como el final en la dimensión en línea a la vez. Los bordes físicos a los que se asigna dependen del modo de escritura, la direccionalidad y la orientación del texto del elemento. Corresponden a las propiedades {{cssxref("border-top")}} y {{cssxref("border-bottom")}} o {{cssxref("border-right")}}, and {{cssxref("border-left")}} dependiendo de los valores definidos por {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+El estilo del borde en otra dimensión puede establecerse con {{cssxref("border-block")}}, que establece {{cssxref("border-block-start")}}, y {{cssxref("border-block-end")}}.
+
+{{cssinfo}}
+
+## Sintaxis
+
+### Valores
+
+El `border-inline` es especificado con uno o más de los siguientes valores, en cualquier orden:
+
+- `<'border-width'>`
+ - : El ancho del borde. Mira {{cssxref("border-width")}}.
+- `<'border-style'>`
+ - : La línea de estilo del borde. Mira {{cssxref("border-style")}}.
+- `<'color'>`
+ - : El color del borde. Mira {{cssxref("color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: yellow;
+ width: 120px;
+ height: 120px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ border-inline: 5px dashed blue;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-inline", "border-inline")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-inline")}}
+
+## Mira también
+
+- Esta propiedad se asigna a una de las propiedades del borde físico:{{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, o {{cssxref("border-left")}}.
+- {{cssxref("writing-mode")}}, {{cssxref("direction")}}, {{cssxref("text-orientation")}}
diff --git a/files/es/web/css/border-left-color/index.html b/files/es/web/css/border-left-color/index.html
deleted file mode 100644
index f249c957eda417..00000000000000
--- a/files/es/web/css/border-left-color/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: border-left-color
-slug: Web/CSS/border-left-color
-translation_of: Web/CSS/border-left-color
----
-Resumen
-
-border-left-color
pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo transparente
.
-
-
- {{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad
- Se aplica a : todos los elementos
- {{ Xref_cssinherited() }}: no
- Porcentajes: N/A
- Media: {{ Xref_cssvisual() }}
- {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.
-
-
-Sintaxis
-
-border-left-color:color | transparent | inherit
-
-
-Valores
-
-
- color
- El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados
- transparent
- El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.
-
-
-Propiedades parecidas
-
-
- {{ Cssxref("border-color") }}
- {{ Cssxref("border-bottom-color") }}
- {{ Cssxref("border-right-color") }}
- {{ Cssxref("border-top-color") }}
-
-
-Examples
-
-Ver El Ejemplo Vivo
-
-element {
- width: 300px;
- padding: 15px;
- border-bottom-size: 1px;
- border-bottom-style: solid;
- border-bottom-color: #000;
-}
-
-
-
-
-
-p {
-border-style: solid;
-border-left-color: #ff0000
-}
-
-p {
-border-style: solid;
-border-left-color: rgb(255,0,0)
-}
-
-
-Notas
-
-
diff --git a/files/es/web/css/border-left-color/index.md b/files/es/web/css/border-left-color/index.md
new file mode 100644
index 00000000000000..75c09e194dada8
--- /dev/null
+++ b/files/es/web/css/border-left-color/index.md
@@ -0,0 +1,65 @@
+---
+title: border-left-color
+slug: Web/CSS/border-left-color
+translation_of: Web/CSS/border-left-color
+---
+### Resumen
+
+`border-left-color` pone el color del borde izquierdo de un elemento,con el valor de el color en hexadecimal o con palabras clave, como azul, verde, rojo `transparente`.
+
+- {{ Xref_cssinitial() }}: {{ Cssxref("color") }} propiedad
+- Se aplica a : todos los elementos
+- {{ Xref_cssinherited() }}: no
+- Porcentajes: N/A
+- Media: {{ Xref_cssvisual() }}
+- {{ Xref_csscomputed() }}: cuando son tomados de la propiedad 'color',los valores computarizados de 'color'; de otra manera como sean especificados.
+
+### Sintaxis
+
+```
+border-left-color:color | transparent | inherit
+```
+
+### Valores
+
+- color
+ - : El color puede ser especificado en un valor RGB en hexadecimal, o usando uno de los colores predeterminados
+- transparent
+ - : El elemento no tiene color de si mismo, en vez este enseña el color detras de este elemento.
+
+### Propiedades parecidas
+
+- {{ Cssxref("border-color") }}
+- {{ Cssxref("border-bottom-color") }}
+- {{ Cssxref("border-right-color") }}
+- {{ Cssxref("border-top-color") }}
+
+### Examples
+
+[Ver El Ejemplo Vivo](/samples/cssref/border.html)
+
+```
+element {
+ width: 300px;
+ padding: 15px;
+ border-bottom-size: 1px;
+ border-bottom-style: solid;
+ border-bottom-color: #000;
+}
+```
+
+```
+p {
+border-style: solid;
+border-left-color: #ff0000
+}
+
+p {
+border-style: solid;
+border-left-color: rgb(255,0,0)
+}
+```
+
+### Notas
+
+- [Color Chart by VisiBone](http://html-color-codes.com/)
diff --git a/files/es/web/css/border-left/index.html b/files/es/web/css/border-left/index.html
deleted file mode 100644
index f05b94be1d8ce9..00000000000000
--- a/files/es/web/css/border-left/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: border-left
-slug: Web/CSS/border-left
-translation_of: Web/CSS/border-left
----
-{{CSSRef}}
-
-Resumen
-
-El borde_izquierdo
es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.
-
-{{cssinfo}}
-
-Sintaxis
-
-border-left: [border-width || border-style || border-color | inherit ] ;
-
-
-Valores
-
-
- border-width
- See {{ Cssxref("border-width") }}.
- border-style
- See {{ Cssxref("border-style") }}.
- border-color
- See {{ Cssxref("border-color") }}.
-
-
-Ejemplos
-
-element {
-
- border-left: 1px solid #000;
-
-
-}
-
-Notas
-
-Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}
-
-Specifications
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }}
- {{ Spec2('CSS3 Backgrounds') }}
- No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it.
-
-
- {{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }}
- {{ Spec2('CSS2.1') }}
- No significant changes
-
-
- {{ SpecName('CSS1', '#border-left', 'border-left') }}
- {{ Spec2('CSS1') }}
- Initial definition
-
-
-
-
-Browser compatibility
-
-{{Compat("css.properties.border-left")}}
diff --git a/files/es/web/css/border-left/index.md b/files/es/web/css/border-left/index.md
new file mode 100644
index 00000000000000..02a1e3dfe1229c
--- /dev/null
+++ b/files/es/web/css/border-left/index.md
@@ -0,0 +1,51 @@
+---
+title: border-left
+slug: Web/CSS/border-left
+translation_of: Web/CSS/border-left
+---
+{{CSSRef}}
+
+## Resumen
+
+El `borde_izquierdo` es una propiedad rápida para poner el ancho, estilo y color del borde izquierdo de un elemento. Esta propiedad puede ser usada para poner los valores de uno o mas de : {{ Cssxref("border-left-width") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-left-color") }}. Valores omitidos son puestos a su valor inicial.
+
+{{cssinfo}}
+
+## Sintaxis
+
+```
+border-left: [border-width || border-style || border-color | inherit] ;
+```
+
+### Valores
+
+- border-width
+ - : See {{ Cssxref("border-width") }}.
+- border-style
+ - : See {{ Cssxref("border-style") }}.
+- border-color
+ - : See {{ Cssxref("border-color") }}.
+
+## Ejemplos
+
+```css
+element {
+ border-left: 1px solid #000;
+}
+```
+
+## Notas
+
+Si las reglas no especifican un color de borde, el borde tendrá la propiedad {{ Cssxref("color") }}
+
+## Specifications
+
+| Specification | Status | Comment |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| {{ SpecName('CSS3 Backgrounds', '#border-left', 'border-left') }} | {{ Spec2('CSS3 Backgrounds') }} | No direct changes, though the modification of values for the {{ cssxref("border-left-color") }} do apply to it. |
+| {{ SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left') }} | {{ Spec2('CSS2.1') }} | No significant changes |
+| {{ SpecName('CSS1', '#border-left', 'border-left') }} | {{ Spec2('CSS1') }} | Initial definition |
+
+## Browser compatibility
+
+{{Compat("css.properties.border-left")}}
diff --git a/files/es/web/css/border-right/index.html b/files/es/web/css/border-right/index.html
deleted file mode 100644
index ea9e06da1f12bd..00000000000000
--- a/files/es/web/css/border-right/index.html
+++ /dev/null
@@ -1,107 +0,0 @@
----
-title: border-right
-slug: Web/CSS/border-right
-tags:
- - Bordes CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-right
----
-{{CSSRef}}
-
-La propiedad CSS border-right
es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}. Estas propiedades establecen un borde derecho del elemento.
-
-{{EmbedInteractiveExample("pages/css/border-right.html")}}
-
-
-
-Como con todas las propiedades rápidas, border-right
siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...
-
-border-right-style: dotted;
-border-right: thick green;
-
-
-... es en realidad lo mismo que ...
-
-border-right-style: dotted;
-border-right: none thick green;
-
-
-... y el valor de {{cssxref("border-right-style")}} dado previamente a border-right
es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es none
, si no se especifica la parte border-style
el resultado es no establecer un borde.
-
-Sintaxis
-
-border-right: 1px;
-border-right: 2px dotted;
-border-right: medium dashed green;
-
-
-Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.
-
-Valores
-
-
- <br-width>
- Ver {{cssxref("border-right-width")}}.
- <br-style>
- Ver {{cssxref("border-right-style")}}.
- {{cssxref("<color>")}}
- Ver {{cssxref("border-right-color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-<div>
- Esta caja tiene un borde en el lado derecho.
-</div>
-
-div {
- border-right: 4px dashed blue;
- background-color: gold;
- height: 100px;
- width: 100px;
- font-weight: bold;
- text-align: center;
-}
-
-
-{{EmbedLiveSample('Example')}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}
- {{Spec2('CSS3 Backgrounds')}}
- No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.
-
-
- {{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}
- {{Spec2('CSS2.1')}}
- No significant changes.
-
-
- {{SpecName('CSS1', '#border-right', 'border-right')}}
- {{Spec2('CSS1')}}
- Initial definition
-
-
-
-
-{{cssinfo}}
-
-Compatibilitidad del navegador
-
-{{Compat("css.properties.border-right")}}
diff --git a/files/es/web/css/border-right/index.md b/files/es/web/css/border-right/index.md
new file mode 100644
index 00000000000000..0dee68188e2e5b
--- /dev/null
+++ b/files/es/web/css/border-right/index.md
@@ -0,0 +1,88 @@
+---
+title: border-right
+slug: Web/CSS/border-right
+tags:
+ - Bordes CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-right
+---
+{{CSSRef}}
+
+La propiedad [CSS](/es/docs/Web/CSS) **`border-right`** es un a propiedad rápida para dar valores al {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}} y {{cssxref("border-right-color")}}. Estas propiedades establecen un [borde](/es/docs/Web/CSS/border)derecho del elemento.
+
+{{EmbedInteractiveExample("pages/css/border-right.html")}}
+
+Como con todas las propiedades rápidas, `border-right` siempre establece los valores de todas las propiedades que puede establecer, incluso si no están especificadas. Establece los no especificados a sus valores por defecto. Lo que significa que ...
+
+```css
+border-right-style: dotted;
+border-right: thick green;
+```
+
+... es en realidad lo mismo que ...
+
+```css
+border-right-style: dotted;
+border-right: none thick green;
+```
+
+... y el valor de {{cssxref("border-right-style")}} dado previamente a `border-right` es ignorado. Puesto que el valor por defecto de {{cssxref("border-right-style")}} es `none`, si no se especifica la parte `border-style` el resultado es no establecer un borde.
+
+## Sintaxis
+
+```css
+border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+```
+
+Los tres valores de la propiedad rápida pueden ser especificados en cualquier orden, incluso omitiendo uno o dos de ellos.
+
+### Valores
+
+- ``
+ - : Ver {{cssxref("border-right-width")}}.
+- ``
+ - : Ver {{cssxref("border-right-style")}}.
+- {{cssxref("<color>")}}
+ - : Ver {{cssxref("border-right-color")}}.
+
+### Formal syntax
+
+{{csssyntax}}
+
+## Ejemplo
+
+```html
+
+ Esta caja tiene un borde en el lado derecho.
+
+```
+
+```css
+div {
+ border-right: 4px dashed blue;
+ background-color: gold;
+ height: 100px;
+ width: 100px;
+ font-weight: bold;
+ text-align: center;
+}
+```
+
+{{EmbedLiveSample('Example')}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}} | {{Spec2('CSS3 Backgrounds')}} | No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}} | {{Spec2('CSS2.1')}} | No significant changes. |
+| {{SpecName('CSS1', '#border-right', 'border-right')}} | {{Spec2('CSS1')}} | Initial definition |
+
+{{cssinfo}}
+
+## Compatibilitidad del navegador
+
+{{Compat("css.properties.border-right")}}
diff --git a/files/es/web/css/border-spacing/index.html b/files/es/web/css/border-spacing/index.html
deleted file mode 100644
index 019da046319561..00000000000000
--- a/files/es/web/css/border-spacing/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: border-spacing
-slug: Web/CSS/border-spacing
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-spacing
----
-<< Volver
-
-Resumen
-
-La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de separación de borde ). Es el equivalente al atributo cellspacing
en HTML.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: 0
- Se aplica a: tablas y elementos con la propiedad inline-table
- {{ Cssxref("inheritance", "Valor heredado") }}: sí
- Medio: {{ Xref_cssvisual() }}
- {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.
-
-
-Sintaxis
-
-border-spacing: <length> | <length> <length> | inherit
-
-Valores
-
-
- <length> : un largo a utilizar para el espaciado horizontal y vertical.
- <length> <length> : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).
-
-
-Ejemplos
-
-Ver El Ejemplo Vivo
-
-table#space {
- border-collapse: separate;
- border-spacing: 10px 5px;
-}
-
-
-Notas
-
-Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en separate
.
-
-El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.
-
-Especificaciones
-
-
-
-Compatibilidades
-
-
-
-
- Navegador
- Versión mínima
-
-
- Netscape
- 6
-
-
- Internet Explorer
- 7
-
-
- Firefox
- 1
-
-
- Mozilla
- 1
-
-
- Safari
- 1
-
-
- Opera
- 6
-
-
-
-
-
-
-Ver también
-
-{{ Cssxref("border-collapse") }}
-
-
-
-{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}
diff --git a/files/es/web/css/border-spacing/index.md b/files/es/web/css/border-spacing/index.md
new file mode 100644
index 00000000000000..57d5baf97fda47
--- /dev/null
+++ b/files/es/web/css/border-spacing/index.md
@@ -0,0 +1,71 @@
+---
+title: border-spacing
+slug: Web/CSS/border-spacing
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-spacing
+---
+<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS)
+
+### Resumen
+
+La propiedad de {{ Cssxref("border-spacing", "espaciado de borde") }} especifica la distancia entre los bordes de celdas adyacentes (sólo para el modelo de [separación de borde](es/CSS/border-collapse)). Es el equivalente al atributo `cellspacing` en HTML.
+
+- {{ Cssxref("initial", "Valor inicial") }}: 0
+- Se aplica a: tablas y elementos con la propiedad `inline-table`
+- {{ Cssxref("inheritance", "Valor heredado") }}: sí
+- Medio: {{ Xref_cssvisual() }}
+- {{ Cssxref("computed value", "Valor calculado") }}: dos largos absolutos.
+
+### Sintaxis
+
+border-spacing: \ | \ \ | inherit
+
+### Valores
+
+- **\** : un largo a utilizar para el espaciado horizontal y vertical.
+- **\ \** : el primero da el espaciado horizontal (espacio entre celdas de una fila) y el segundo el espaciado vertical (espacio entre celdas de una columna).
+
+### Ejemplos
+
+[Ver El Ejemplo Vivo](/samples/cssref/border-spacing.html)
+
+```
+table#space {
+ border-collapse: separate;
+ border-spacing: 10px 5px;
+}
+```
+
+### Notas
+
+Ésta propiedad sólo se aplica cuando {{ Cssxref("border-collapse") }} es especificado en `separate`.
+
+El espaciado de borde también se utiliza en los bordes exteriores de las tablas donde la distancia entre los bordes de tabla y las celdas en la primera/última columna o fila es la suma de los espaciados (horizontales o verticales) y de los espaciados (arriba, derecho, abajo o izquierdo) en una tabla.
+
+### Especificaciones
+
+- [CSS 2.1](http://www.w3.org/TR/CSS21/tables.html#propdef-border-spacing)
+
+### Compatibilidades
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Netscape | 6 |
+| Internet Explorer | 7 |
+| Firefox | 1 |
+| Mozilla | 1 |
+| Safari | 1 |
+| Opera | 6 |
+
+### Ver también
+
+{{ Cssxref("border-collapse") }}
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "en": "en/CSS/border-spacing" } ) }}
diff --git a/files/es/web/css/border-start-end-radius/index.html b/files/es/web/css/border-start-end-radius/index.html
deleted file mode 100644
index 4c4c7268e4ff8c..00000000000000
--- a/files/es/web/css/border-start-end-radius/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-start-end-radius
-slug: Web/CSS/border-start-end-radius
-translation_of: Web/CSS/border-start-end-radius
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-start-end-radius
define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
-
-/* <length> values */
-/* With one value the corner will be a circle */
-border-start-end-radius: 10px;
-border-start-end-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-start-end-radius: 1em 2em;
-
-/* Global values */
-border-start-end-radius: inherit;
-border-start-end-radius: initial;
-border-start-end-radius: unset;
-
-
-Por ejemplo, en un modo de escritura horizontal-tb
, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.
-
-Sintaxis
-
-Valores
-
-
- <length-percentage>
- Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
-
-
-
-
-{{CSSSyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: rebeccapurple;
- width: 120px;
- height: 120px;
- border-start-end-radius: 10px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- padding: 10px;
- background-color: #fff;
- border-start-end-radius: 10px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-{{CSSInfo}}
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-start-end-radius")}}
-
-Mira también
-
-
- La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}
- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
-
diff --git a/files/es/web/css/border-start-end-radius/index.md b/files/es/web/css/border-start-end-radius/index.md
new file mode 100644
index 00000000000000..14cbd489afa938
--- /dev/null
+++ b/files/es/web/css/border-start-end-radius/index.md
@@ -0,0 +1,83 @@
+---
+title: border-start-end-radius
+slug: Web/CSS/border-start-end-radius
+translation_of: Web/CSS/border-start-end-radius
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-start-end-radius`** define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}}.
+
+```css
+/* values */
+/* With one value the corner will be a circle */
+border-start-end-radius: 10px;
+border-start-end-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-end-radius: 1em 2em;
+
+/* Global values */
+border-start-end-radius: inherit;
+border-start-end-radius: initial;
+border-start-end-radius: unset;
+```
+
+Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-bottom-left-radius")}}.
+
+## Sintaxis
+
+### Valores
+
+- ``
+ - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
+
+### Sintaxis formal
+
+{{CSSSyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: rebeccapurple;
+ width: 120px;
+ height: 120px;
+ border-start-end-radius: 10px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ padding: 10px;
+ background-color: #fff;
+ border-start-end-radius: 10px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-start-end-radius", "border-start-end-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+{{CSSInfo}}
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-start-end-radius")}}
+
+## Mira también
+
+- La propiedad física asignada: {{CSSxRef("border-bottom-left-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/es/web/css/border-start-start-radius/index.html b/files/es/web/css/border-start-start-radius/index.html
deleted file mode 100644
index 1a8568295be741..00000000000000
--- a/files/es/web/css/border-start-start-radius/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: border-start-start-radius
-slug: Web/CSS/border-start-start-radius
-translation_of: Web/CSS/border-start-start-radius
----
-{{CSSRef}}{{SeeCompatTable}}
-
-La propiedad de CSS border-start-start-radius
define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
-
-/* <length> values */
-/* With one value the corner will be a circle */
-border-start-start-radius: 10px;
-border-start-start-radius: 1em;
-
-/* With two values the corner will be an ellipse */
-border-start-start-radius: 1em 2em;
-
-/* Global values */
-border-start-start-radius: inherit;
-border-start-start-radius: initial;
-border-start-start-radius: unset;
-
-
-Por ejemplo, en un modo de escritura horizontal-tb
, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.
-
-Sintaxis
-
-Valores
-
-
- <length-percentage>
- Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
-
-
-
-
-{{CSSSyntax}}
-
-Ejemplo
-
-Contenido HTML
-
-<div>
- <p class="exampleText">Example</p>
-</div>
-
-
-Contenido CSS
-
-div {
- background-color: rebeccapurple;
- width: 120px;
- height: 120px;
- border-start-start-radius: 10px;
-}
-
-.exampleText {
- writing-mode: vertical-rl;
- padding: 10px;
- background-color: #fff;
- border-start-start-radius: 10px;
-}
-
-{{EmbedLiveSample("Ejemplo", 140, 140)}}
-
-Especificación
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}}
- {{Spec2("CSS Logical Properties")}}
- Definición inicial.
-
-
-
-
-{{CSSInfo}}
-
-Compatibilidad en navegadores
-
-
-
-{{Compat("css.properties.border-start-start-radius")}}
-
-Mira también
-
-
- La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}
- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
-
diff --git a/files/es/web/css/border-start-start-radius/index.md b/files/es/web/css/border-start-start-radius/index.md
new file mode 100644
index 00000000000000..b916dd9a58125d
--- /dev/null
+++ b/files/es/web/css/border-start-start-radius/index.md
@@ -0,0 +1,83 @@
+---
+title: border-start-start-radius
+slug: Web/CSS/border-start-start-radius
+translation_of: Web/CSS/border-start-start-radius
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+La propiedad de [CSS](/es/docs/Web/CSS) **`border-start-start-radius`** define al radio del borde lógico de un elemento, que se asigna al radio de borde físico dependiendo del modo de escritura, la direccionalidad y la orientación del texto del elemento. Esto corresponde a las propiedades {{cssxref("writing-mode")}}, {{cssxref("direction")}}, y {{cssxref("text-orientation")}}.
+
+```css
+/* values */
+/* With one value the corner will be a circle */
+border-start-start-radius: 10px;
+border-start-start-radius: 1em;
+
+/* With two values the corner will be an ellipse */
+border-start-start-radius: 1em 2em;
+
+/* Global values */
+border-start-start-radius: inherit;
+border-start-start-radius: initial;
+border-start-start-radius: unset;
+```
+
+Por ejemplo, en un modo de escritura `horizontal-tb`, esta propiedad corresponde a la propiedad {{CSSxRef("border-top-left-radius")}}.
+
+## Sintaxis
+
+### Valores
+
+- ``
+ - : Indica el tamaño del radio del círculo o los ejes semi mayor y semi menor de la elipse. Como longitud absoluta, se puede expresar en cualquier unidad permitida por el tipo de datos CSS {{cssxref ("<length>")}}. 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.
+
+### Sintaxis formal
+
+{{CSSSyntax}}
+
+## Ejemplo
+
+### Contenido HTML
+
+```html
+
+```
+
+### Contenido CSS
+
+```css
+div {
+ background-color: rebeccapurple;
+ width: 120px;
+ height: 120px;
+ border-start-start-radius: 10px;
+}
+
+.exampleText {
+ writing-mode: vertical-rl;
+ padding: 10px;
+ background-color: #fff;
+ border-start-start-radius: 10px;
+}
+```
+
+{{EmbedLiveSample("Ejemplo", 140, 140)}}
+
+## Especificación
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------- |
+| {{SpecName("CSS Logical Properties", "#propdef-border-start-start-radius", "border-start-start-radius")}} | {{Spec2("CSS Logical Properties")}} | Definición inicial. |
+
+{{CSSInfo}}
+
+## Compatibilidad en navegadores
+
+{{Compat("css.properties.border-start-start-radius")}}
+
+## Mira también
+
+- La propiedad física asignada: {{CSSxRef("border-top-left-radius")}}
+- {{CSSxRef("writing-mode")}}, {{CSSxRef("direction")}}, {{CSSxRef("text-orientation")}}
diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html
deleted file mode 100644
index b8584a75de5f1f..00000000000000
--- a/files/es/web/css/border-style/index.html
+++ /dev/null
@@ -1,242 +0,0 @@
----
-title: border-style
-slug: Web/CSS/border-style
-tags:
- - Bordes CSS
- - CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-style
----
-{{CSSRef}}
-
-La propiedad border-style
CSS es una shorthand property (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.
-
-{{EmbedInteractiveExample("pages/css/border-style.html")}}
-
-
-
-Syntax
-
-/* Keyword values */
-border-top-style: none;
-border-top-style: hidden;
-border-top-style: dotted;
-border-top-style: dashed;
-border-top-style: solid;
-border-top-style: double;
-border-top-style: groove;
-border-top-style: ridge;
-border-top-style: inset;
-border-top-style: outset;
-
-/* vertical | horizontal */
-border-style: dotted solid;
-
-/* top | horizontal | bottom */
-border-style: hidden double dashed;
-
-/* top | right | bottom | left */
-border-style: none solid dotted dashed;
-
-/* Global values */
-border-style: inherit;
-border-style: initial;
-border-style: unset;
-
-
-La propiedad border-style
se puede especificar usando uno, dos, tres o cuatro valores.
-
-
- Cuando se especifica un valor, se aplica el mismo estilo a los cuatro lados .
- Cuando se especifican dos valores, el primer estilo se aplica a la parte superior e inferior , el segundo a la izquierda y a la derecha
- Cuando se especifican tres valores, el primer estilo se aplica a la parte superior , el segundo a la izquierda y derecha , el tercero a la parte inferior .
- Cuando se especifican cuatro valores, los estilos se aplican a la parte superior , derecha , inferior e izquierda en ese orden (en el sentido de las agujas del reloj).
-
-
-Cada valor es una palabra clave elegida de la siguiente lista.
-
-Values
-
-
- <br-style>
- Describe el estilo del borde. Puede tener los siguientes valores:
-
-
-
- none
-
-
-
- Like the hidden
keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0
, even if the specified value is something else. In the case of table cell and border collapsing, the none
value has the lowest priority: if any other conflicting border is set, it will be displayed.
-
-
- hidden
-
-
-
- Like the none
keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be 0
, even if the specified value is something else. In the case of table cell and border collapsing, the hidden
value has the highest priority: if any other conflicting border is set, it won't be displayed.
-
-
- dotted
-
-
-
- Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}.
-
-
- dashed
-
-
-
- Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
-
-
- solid
-
-
-
- Displays a single, straight, solid line.
-
-
- double
-
-
-
- Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.
-
-
- groove
-
-
-
- Displays a border with a carved appearance. It is the opposite of ridge
.
-
-
- ridge
-
-
-
- Displays a border with an extruded appearance. It is the opposite of groove
.
-
-
- inset
-
-
-
- Displays a border that makes the element appear embedded. It is the opposite of outset
. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed
, this value behaves like groove
.
-
-
- outset
-
-
-
-
- Displays a border that makes the element appear embossed. It is the opposite of inset
. When applied to a table cell with {{ cssxref("border-collapse") }} set to collapsed
, this value behaves like ridge
.
-
-
-
-
-
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-Tabla con todos los valores de propiedad
-
-A continuación, se muestra un ejemplo de todos los valores de propiedad.
-
-HTML
-
-<table>
- <tr>
- <td class="b1">none</td>
- <td class="b2">hidden</td>
- <td class="b3">dotted</td>
- <td class="b4">dashed</td>
- </tr>
- <tr>
- <td class="b5">solid</td>
- <td class="b6">double</td>
- <td class="b7">groove</td>
- <td class="b8">ridge</td>
- </tr>
- <tr>
- <td class="b9">inset</td>
- <td class="b10">outset</td>
- </tr>
-</table>
-
-CSS
-
-/* Define look of the table */
-table {
- border-width: 3px;
- background-color: #52E396;
-}
-tr, td {
- padding: 2px;
-}
-
-/* border-style example classes */
-.b1 {border-style:none;}
-.b2 {border-style:hidden;}
-.b3 {border-style:dotted;}
-.b4 {border-style:dashed;}
-.b5 {border-style:solid;}
-.b6 {border-style:double;}
-.b7 {border-style:groove;}
-.b8 {border-style:ridge;}
-.b9 {border-style:inset;}
-.b10 {border-style:outset;}
-
-Output
-
-{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}
-
-Especificaciones
-
-
-
-
- Especificacion
- Estado
- Comentario
-
-
-
-
- {{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}
- {{ Spec2('CSS3 Backgrounds') }}
- No change.
-
-
- {{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}
- {{ Spec2('CSS2.1') }}
- Adds hidden
keyword value.
-
-
- {{ SpecName('CSS1', '#border-style', 'border-style') }}
- {{ Spec2('CSS1') }}
- Initial definition.
-
-
-
-
-{{cssinfo}}
-
-Compatibilidad del navegador
-
-
-
-{{Compat("css.properties.border-style")}}
-
-Ver también
-
-
- The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}
-
diff --git a/files/es/web/css/border-style/index.md b/files/es/web/css/border-style/index.md
new file mode 100644
index 00000000000000..9d467d9f80bdc3
--- /dev/null
+++ b/files/es/web/css/border-style/index.md
@@ -0,0 +1,152 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+ - Bordes CSS
+ - CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-style
+---
+{{CSSRef}}
+
+La propiedad **`border-style`** [CSS](/en/CSS) es una [shorthand property](/es/docs/Web/CSS/Shorthand_properties) (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.
+
+{{EmbedInteractiveExample("pages/css/border-style.html")}}
+
+## Syntax
+
+```css
+/* Keyword values */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* vertical | horizontal */
+border-style: dotted solid;
+
+/* top | horizontal | bottom */
+border-style: hidden double dashed;
+
+/* top | right | bottom | left */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+```
+
+La propiedad `border-style` se puede especificar usando uno, dos, tres o cuatro valores.
+
+- Cuando se especifica **un** valor, se aplica el mismo estilo a los **cuatro lados**.
+- Cuando se especifican **dos** valores, el primer estilo se aplica a la parte **superior e inferior**, el segundo a la **izquierda y a la derecha**
+- Cuando se especifican **tres** valores, el primer estilo se aplica a la **parte superior**, el segundo a la **izquierda y derecha**, el tercero a la **parte inferior**.
+- Cuando se especifican **cuatro** valores, los estilos se aplican a la parte **superior**, **derecha**, **inferior** e **izquierda** en ese orden (en el sentido de las agujas del reloj).
+
+Cada valor es una palabra clave elegida de la siguiente lista.
+
+### Values
+
+- ``
+
+ - : Describe el estilo del borde. Puede tener los siguientes valores:
+
+ | `none` | | Like the `hidden` keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `none` value has the _lowest_ priority: if any other conflicting border is set, it will be displayed. |
+ | -------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+ | `hidden` | | Like the `none` keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be `0`, even if the specified value is something else. In the case of table cell and border collapsing, the `hidden` value has the _highest_ priority: if any other conflicting border is set, it won't be displayed. |
+ | `dotted` | | Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated {{ cssxref("border-top-width") }}. |
+ | `dashed` | | Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. |
+ | `solid` | | Displays a single, straight, solid line. |
+ | `double` | | Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}. |
+ | `groove` | | Displays a border with a carved appearance. It is the opposite of `ridge`. |
+ | `ridge` | | Displays a border with an extruded appearance. It is the opposite of `groove`. |
+ | `inset` | | Displays a border that makes the element appear embedded. It is the opposite of `outset`. When applied to a table cell with {{ cssxref("border-collapse") }} set to `collapsed`, this value behaves like `groove`. |
+ | `outset` | | Displays a border that makes the element appear embossed. It is the opposite of `inset`. When applied to a table cell with {{ cssxref("border-collapse") }} set to `collapsed`, this value behaves like `ridge`. |
+
+### Formal syntax
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Tabla con todos los valores de propiedad
+
+A continuación, se muestra un ejemplo de todos los valores de propiedad.
+
+#### HTML
+
+```html
+
+
+ none
+ hidden
+ dotted
+ dashed
+
+
+ solid
+ double
+ groove
+ ridge
+
+
+ inset
+ outset
+
+
+```
+
+#### CSS
+
+```css
+/* Define look of the table */
+table {
+ border-width: 3px;
+ background-color: #52E396;
+}
+tr, td {
+ padding: 2px;
+}
+
+/* border-style example classes */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+```
+
+#### Output
+
+{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}
+
+## Especificaciones
+
+| Especificacion | Estado | Comentario |
+| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | ---------------------------- |
+| {{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }} | {{ Spec2('CSS3 Backgrounds') }} | No change. |
+| {{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }} | {{ Spec2('CSS2.1') }} | Adds `hidden` keyword value. |
+| {{ SpecName('CSS1', '#border-style', 'border-style') }} | {{ Spec2('CSS1') }} | Initial definition. |
+
+{{cssinfo}}
+
+## Compatibilidad del navegador
+
+{{Compat("css.properties.border-style")}}
+
+## Ver también
+
+- The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}
diff --git a/files/es/web/css/border-top-color/index.html b/files/es/web/css/border-top-color/index.html
deleted file mode 100644
index 786cdabddff90f..00000000000000
--- a/files/es/web/css/border-top-color/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: border-top-color
-slug: Web/CSS/border-top-color
-translation_of: Web/CSS/border-top-color
----
-{{CSSRef}}
-
-La propiedad CSS border-top-color
establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.
-
-/*valores <color> */
-border-top-color: red;
-border-top-color: #ffbb00;
-border-top-color: rgb(255, 0, 0);
-border-top-color: hsla(100%, 50%, 25%, 0.75);
-border-top-color: currentColor;
-border-top-color: transparent;
-
-/* Valores globales */
-border-top-color: inherit;
-border-top-color: initial;
-border-top-color: unset;
-
-
-{{cssinfo}}
-
-Sintaxis
-
-La propiedad border-top-color
es especificada con un valor unico.
-
-Valores
-
-
- {{cssxref("<color>")}}
- El color superior del borde
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-Un div simple con un borde
-
-HTML
-
-<div class="mybox">
- <p>Esta es una caja con un border alrededor.
- Tenga en cuenta que un border de la caja es
- <span class="redtext">Rojo</span>.</p>
-</div>
-
-CSS
-
-.mybox {
- border: solid 0.3em gold;
- border-top-color: red;
- width: auto;
-}
-
-.redtext {
- color: red;
-}
-
-Resultado
-
-{{EmbedLiveSample('A_simple_div_with_a_border')}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}
- {{Spec2('CSS3 Backgrounds')}}
- Sin cambios significativos, aunque la palabra clave transparent
, ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente.
-
-
- {{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}}
- {{Spec2('CSS2.1')}}
- Definición inicial
-
-
-
-
-Compatibilidad entre navegadores
-
-
-
-{{Compat("css.properties.border-top-color")}}
-
-Ver tambien
-
-
- Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.
- Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.
- Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.
-
diff --git a/files/es/web/css/border-top-color/index.md b/files/es/web/css/border-top-color/index.md
new file mode 100644
index 00000000000000..bc99383e825f64
--- /dev/null
+++ b/files/es/web/css/border-top-color/index.md
@@ -0,0 +1,87 @@
+---
+title: border-top-color
+slug: Web/CSS/border-top-color
+translation_of: Web/CSS/border-top-color
+---
+{{CSSRef}}
+
+La propiedad CSS **`border-top-color`** establece el color superior de un elemento {{cssxref("border")}}. Tenga en cuenta que en la mayoria de los casos las propiedades abreviadas {{cssxref("border-color")}} o {{cssxref("border-top")}} son mas convenientes y preferidas.
+
+```css
+/*valores */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* Valores globales */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+```
+
+{{cssinfo}}
+
+## Sintaxis
+
+La propiedad `border-top-color` es especificada con un valor unico.
+
+### Valores
+
+- {{cssxref("<color>")}}
+ - : El color superior del borde
+
+### Sintaxis Formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+### Un div simple con un borde
+
+#### HTML
+
+```html
+
+
Esta es una caja con un border alrededor.
+ Tenga en cuenta que un border de la caja es
+ Rojo .
+
+```
+
+#### CSS
+
+```css
+.mybox {
+ border: solid 0.3em gold;
+ border-top-color: red;
+ width: auto;
+}
+
+.redtext {
+ color: red;
+}
+```
+
+#### Resultado
+
+{{EmbedLiveSample('A_simple_div_with_a_border')}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}} | {{Spec2('CSS3 Backgrounds')}} | Sin cambios significativos, aunque la palabra clave `transparent` , ahora incluida en {{cssxref("<color>")}} que se ha extendido, se ha eliminado formalmente. |
+| {{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-top-color')}} | {{Spec2('CSS2.1')}} | Definición inicial |
+
+## Compatibilidad entre navegadores
+
+{{Compat("css.properties.border-top-color")}}
+
+## Ver tambien
+
+- Las propiedades abreviadas de CSS relacionadas con los bordes : {{Cssxref("border")}}, {{Cssxref("border-top")}}, y {{Cssxref("border-color")}}.
+- Las propiedades abrevadas de CSS relacionadas con el color para los bordes: {{Cssxref("border-right-color")}}, {{Cssxref("border-bottom-color")}}, y {{Cssxref("border-left-color")}}.
+- Las otras propiedades CSS relaciones con los bordes que se aplican al mismo borde : {{cssxref("border-top-style")}} y {{cssxref("border-top-width")}}.
diff --git a/files/es/web/css/border-top-left-radius/index.html b/files/es/web/css/border-top-left-radius/index.html
deleted file mode 100644
index 4b7af19869abf5..00000000000000
--- a/files/es/web/css/border-top-left-radius/index.html
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: border-top-left-radius
-slug: Web/CSS/border-top-left-radius
-tags:
- - Bordes CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-top-left-radius
----
-{{CSSRef}}
-
-La propiedad CSS border-top-left-radius
establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,
no se redondeará la esquina, dejándola cuadrada.
-
-
-
-Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
-
-Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad
border-top-left-radius
, el valor de esta propiedad es restaurado a su valor inicial por la
propiedad de forma reducida .
-
-{{cssinfo}}
-
-Sintaxis
-
-/* la esquina es un círculo */
-/* border-top-left-radius: radius */
-border-top-left-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-top-left-radius: horizontal vertical */
-border-top-left-radius: 0.5em 1em;
-
-border-top-left-radius: inherit;
-
-
-
-
donde:
-
-
- radius
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
- horizontal
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
- vertical
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
-
-Valores
-
-
- <length>
- Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
- <percentage>
- Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-
-
-
- Ejemplo en vivo
- Código
-
-
-
-
-
-
-
- Un arco de círculo usado como borde
-
-div {
- border-top-left-radius: 40px 40px;
-}
-
-
-
-
-
-
-
- Un arco de elipse usado como borde
-
-div {
- border-top-left-radius: 40px 20px;
-}
-
-
-
-
-
-
-
- La caja es un cuadro: un arco de círculo es usado como borde
-
-div
- border-top-left-radius: 40%;
-}
-
-
-
-
-
-
-
- La caja no es un círculo: un arco de elipse es usado como borde
-
-div {
- border-top-left-radius: 40%;
-}
-
-
-
-
-
-
-
- El color de fondo está delimitado al borde
-
-div {
- border-top-left-radius:40%;
- border-style: black 3px double;
- background-color: rgb(250,20,70);
- background-clip: content-box;
-}
-
-
-
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-top-left-radius")}}
-
-Véase también
-
-Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/es/web/css/border-top-left-radius/index.md b/files/es/web/css/border-top-left-radius/index.md
new file mode 100644
index 00000000000000..817865c22be847
--- /dev/null
+++ b/files/es/web/css/border-top-left-radius/index.md
@@ -0,0 +1,161 @@
+---
+title: border-top-left-radius
+slug: Web/CSS/border-top-left-radius
+tags:
+ - Bordes CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-top-left-radius
+---
+{{CSSRef}}
+
+La propiedad CSS **`border-top-left-radius`** establece el redondeo de la esquina superior izquierda del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0,`no se redondeará la esquina, dejándola cuadrada.
+
+![border-radius.png](/@api/deki/files/6132/=border-radius.png)
+
+Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
+
+> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-top-left-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties).
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* la esquina es un círculo */
+/* border-top-left-radius: radius */
+border-top-left-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-left-radius: horizontal vertical */
+border-top-left-radius: 0.5em 1em;
+
+border-top-left-radius: inherit;
+```
+
+donde:
+
+- _radius_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+- _horizontal_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+- _vertical_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+### Valores
+
+- ``
+ - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+- ``
+ - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+#### Un arco de círculo usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-top-left-radius: 40px 40px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### Un arco de elipse usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-top-left-radius: 40px 20px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja es un cuadro: un arco de círculo es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-top-left-radius: 40%;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja no es un círculo: un arco de elipse es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ border-top-left-radius: 40%;
+ width: 100px;
+ height: 200px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### El color de fondo está delimitado al borde
+
+```html hidden
+
+```
+
+```css
+div {
+ border: black 3px double;
+ border-top-left-radius: 40%;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(250,20,70);
+ background-clip: content-box;
+}
+```
+
+{{EmbedLiveSample}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-left-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-top-left-radius")}}
+
+## Véase también
+
+Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/es/web/css/border-top-right-radius/index.html b/files/es/web/css/border-top-right-radius/index.html
deleted file mode 100644
index a84a026315d2e6..00000000000000
--- a/files/es/web/css/border-top-right-radius/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: border-top-right-radius
-slug: Web/CSS/border-top-right-radius
-tags:
- - Bordes CSS
- - Propiedad CSS
- - Referencia
-translation_of: Web/CSS/border-top-right-radius
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad CSS border-top-right-radius
establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es 0,
no se redondeará la esquina, dejándola cuadrada.
-
-
-
-Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
-
-Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad
border-top-radius-radius
, el valor de esta propiedad es restaurado a su valor inicial por la propiedad de forma reducida .
-
-{{cssinfo}}
-
-Sintaxis
-
-/* la esquina es un círculo */
-/* border-top-right-radius: radius */
-border-top-right-radius: 3px;
-
-/* la esquina es una elipse */
-/* border-top-right-radius: horizontal vertical */
-border-top-right-radius: 0.5em 1em;
-
-border-top-right-radius: inherit;
-
-
-
-
donde:
-
-
- radius
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
- horizontal
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
- vertical
- Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
-
-
-
-Valores
-
-
- <length>
- Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
- <percentage>
- Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-
-
-
- Ejemplo en vivo
- Código
-
-
-
-
-
-
-
- Un arco de círculo usado como borde
-
-div {
- border-top-right-radius: 40px 40px;
-}
-
-
-
-
-
-
-
- Un arco de elipse usado como borde
-
-div {
- border-top-right-radius: 40px 20px;
-}
-
-
-
-
-
-
-
- La caja es un cuadro: un arco de círculo es usado como borde
-
-div {
- border-top-right-radius: 40%;
-}
-
-
-
-
-
-
-
- La caja no es un círculo: un arco de elipse es usado como borde
-
-div {
- border-top-right-radius: 40%;
-}
-
-
-
-
-
-
-
- El color de fondo está delimitado al borde
-
-div {
- border-top-right-radius:40%;
- border-style: black 3px double;
- background-color: rgb(250,20,70);
- background-clip: content-box;
-}
-
-
-
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-Compatibilidad de navegadores
-
-{{Compat("css.properties.border-top-right-radius")}}
-
-Véase también
-
-Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/es/web/css/border-top-right-radius/index.md b/files/es/web/css/border-top-right-radius/index.md
new file mode 100644
index 00000000000000..e68779c21afa41
--- /dev/null
+++ b/files/es/web/css/border-top-right-radius/index.md
@@ -0,0 +1,163 @@
+---
+title: border-top-right-radius
+slug: Web/CSS/border-top-right-radius
+tags:
+ - Bordes CSS
+ - Propiedad CSS
+ - Referencia
+translation_of: Web/CSS/border-top-right-radius
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad CSS **`border-top-right-radius`** establece el redondeo de la esquina superior derecha del elemento. El redondeo puede ser un círculo o una elipse, o si uno de los valores es `0,`no se redondeará la esquina, dejándola cuadrada.
+
+![border-top-right-radius.png](/@api/deki/files/6133/=border-top-right-radius.png)
+
+Un fondo, siendo una imagen o color, está limitado a los bordes, incluso a los redondeados; la posición exacta del corte será definida por el valor de la propiedad {{cssxref("background-clip")}}.
+
+> **Nota:** Si el valor de esta propiedad no se establece en una propiedad reducida {{cssxref("border-radius")}} que es aplicada al elemento después de la propiedad `border-top-radius-radius`, el valor de esta propiedad es restaurado a su valor inicial por la [propiedad de forma reducida](/es/docs/Web/CSS/Shorthand_properties).
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+/* la esquina es un círculo */
+/* border-top-right-radius: radius */
+border-top-right-radius: 3px;
+
+/* la esquina es una elipse */
+/* border-top-right-radius: horizontal vertical */
+border-top-right-radius: 0.5em 1em;
+
+border-top-right-radius: inherit;
+```
+
+donde:
+
+- _radius_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el radio del círculo que se usará para el borde en esa esquina.
+- _horizontal_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor horizontal de la elipse que se usará en el borde de esa esquina.
+- _vertical_
+ - : Es un valor {{cssxref("<length>")}} o {{cssxref("<percentage>")}} que denota el eje semi-mayor vertical de la elipse que se usará en el borde de esa esquina.
+
+### Valores
+
+- ``
+ - : Denota el tamaño del radio de círculo o del eje semi-mayor o semi-menor de la elipse. Puede ser expresado en cualquier tipo de unidad permitida por el tipo de dato CSS {{cssxref("<length>")}}. Los valores negativos no son válidos.
+- ``
+ - : Denota el tamaño del radio del círculo, o de los ejes semi-mayores y semi-menores de la elipse, usando valores porcentuales. Porcentajes del eje horizontal toman como referencia a la anchura de la caja, y porcentajes del eje vertical toman como referencia la altura de la caja. Los valores negativos no son válidos.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+#### Un arco de círculo usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-top-right-radius: 40px 40px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### Un arco de elipse usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-top-right-radius: 40px 20px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja es un cuadro: un arco de círculo es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ width: 100px;
+ height: 100px;
+ border-top-right-radius: 40%;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### La caja no es un círculo: un arco de elipse es usado como borde
+
+```html hidden
+
+```
+
+```css
+div {
+ background-color: lightgreen;
+ border: solid 1px black;
+ border-top-right-radius: 40%;
+ width: 100px;
+ height: 200px;
+}
+```
+
+{{EmbedLiveSample}}
+
+#### El color de fondo está delimitado al borde
+
+```html hidden
+
+```
+
+```css
+div {
+ border: black 3px double;
+ border-top-right-radius: 40%;
+ height: 100px;
+ width: 100px;
+ background-color: rgb(250,20,70);
+ background-clip: content-box;
+}
+```
+
+{{EmbedLiveSample}}
+
+## Especificaciones
+
+| Especificación | Estado | Comentarios |
+| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#the-border-radius', 'border-top-right-radius')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+## Compatibilidad de navegadores
+
+{{Compat("css.properties.border-top-right-radius")}}
+
+## Véase también
+
+Las propiedades CSS relacionadas con radio de borde: la forma reducida {{cssxref("border-radius")}}, las propiedades de las otras esquinas: {{cssxref("border-top-left-radius")}}, {{cssxref("border-bottom-right-radius")}}, y {{cssxref("border-bottom-left-radius")}}.
diff --git a/files/es/web/css/border-top/index.html b/files/es/web/css/border-top/index.html
deleted file mode 100644
index 13876b1111ba89..00000000000000
--- a/files/es/web/css/border-top/index.html
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: border-top
-slug: Web/CSS/border-top
-tags:
- - Bordes
- - CSS
- - Propiedades CSS
- - Referencia
-translation_of: Web/CSS/border-top
----
-{{CSSRef}}
-
-Resumen
-
-La propiedad de CSS border-top
es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.
-
-
-
Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.
-
-
Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:
-
-
border-top: none thick green;
-
-
-
es lo mismo que
-
-
border-top: thick green;
-
-
-
y el valor de {{Cssxref("border-top-style")}} establecido antes de border-top
es ignorado.
-
-
El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será none.
-
-
También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar border-top
se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a none
-
-
border-top-style: dotted;
- border-top: thick green;
-
-
-
-{{cssinfo}}
-
-Sintaxis
-
-border-top: 1px;
-border-top: 2px dotted;
-border-top: medium dashed green;
-
-
-Valores
-
-
- <br-width>
- See {{Cssxref("border-top-width")}}.
- <br-style>
- See {{Cssxref("border-top-style")}}.
- <color>
- See {{Cssxref("border-top-color")}}.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-element {
- border-top: 1px solid #000;
-}
-
-
-Especificaciones
-
-
-
-
- Especificación
- Status
- Comentarios
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}
- {{Spec2('CSS3 Backgrounds')}}
-
- No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican.
-
-
-
- {{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}
- {{Spec2('CSS2.1')}}
- No hay cambios significativos
-
-
- {{SpecName('CSS1', '#border-top', 'border-top')}}
- {{Spec2('CSS1')}}
- Definición inicial
-
-
-
-
-Compatibilidad con navegadores
-
-{{Compat("css.properties.border-top")}}
diff --git a/files/es/web/css/border-top/index.md b/files/es/web/css/border-top/index.md
new file mode 100644
index 00000000000000..2a4a9f92b57972
--- /dev/null
+++ b/files/es/web/css/border-top/index.md
@@ -0,0 +1,83 @@
+---
+title: border-top
+slug: Web/CSS/border-top
+tags:
+ - Bordes
+ - CSS
+ - Propiedades CSS
+ - Referencia
+translation_of: Web/CSS/border-top
+---
+{{CSSRef}}
+
+## Resumen
+
+La propiedad de [CSS](/es/docs/CSS) **`border-top`** es una abreviatura que establece los valores de {{Cssxref("border-top-color")}}, {{Cssxref("border-top-style")}}, y {{Cssxref("border-top-width")}}. Estas propiedades las características del borde superior de un elemento.
+
+> **Nota:** Los tres valores de la abreviatura pueden ser especificados en cualquier orden, y uno o dos de ellos pueden ser omitidos.
+>
+> Como con todas las propiedades abreviadas, border-top siempre establece los valores de todas las propiedades que sean posibles, aun si no están especificadas. Establece aquellas que no son especificadas a sus valores por defecto. Esto significa que:
+>
+> ```css
+> border-top: none thick green;
+> ```
+>
+> es lo mismo que
+>
+> ```css
+> border-top: thick green;
+> ```
+>
+> y el valor de {{Cssxref("border-top-style")}} establecido antes de `border-top` es ignorado.
+>
+> El no especificar la parte de border-style que está destinada a establecer el valor de {{Cssxref("border-top-style")}} significa que se tomará el valor por defecto, lo que significa que el {{Cssxref("border-top-style")}} será `none.`
+>
+> También hay que tomar en cuenta que en el siguiente bloque de código se ignorará la primer asignación de {{Cssxref("border-top-style")}} dado que al indicar `border-top` se establecerá implicitamente el valor de {{Cssxref("border-top-style")}} a `none`
+>
+> ```css
+> border-top-style: dotted;
+> border-top: thick green;
+> ```
+
+{{cssinfo}}
+
+## Sintaxis
+
+```css
+border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+```
+
+### Valores
+
+- ``
+ - : See {{Cssxref("border-top-width")}}.
+- ``
+ - : See {{Cssxref("border-top-style")}}.
+- ``
+ - : See {{Cssxref("border-top-color")}}.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+```css
+element {
+ border-top: 1px solid #000;
+}
+```
+
+## Especificaciones
+
+| Especificación | Status | Comentarios |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}} | {{Spec2('CSS3 Backgrounds')}} | No hay cambios directos, aunque la modificación de valores para {{cssxref("border-top-color")}} sí aplican. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}} | {{Spec2('CSS2.1')}} | No hay cambios significativos |
+| {{SpecName('CSS1', '#border-top', 'border-top')}} | {{Spec2('CSS1')}} | Definición inicial |
+
+## Compatibilidad con navegadores
+
+{{Compat("css.properties.border-top")}}
diff --git a/files/es/web/css/border-width/index.html b/files/es/web/css/border-width/index.html
deleted file mode 100644
index d6de911dc187f3..00000000000000
--- a/files/es/web/css/border-width/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: border-width
-slug: Web/CSS/border-width
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border-width
----
-Resumen
-
-La propiedad border-width
define el ancho del borde.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
- Se aplica a: todos los elementos
- {{ Cssxref("inheritance", "Herencia") }}: no
- Porcentajes: N/A
- Medio: {{ Cssxref("Media:Visual", "visual") }}
- {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es ninguno ('none') o 'hidden'.
-
-
-Sintaxis
-
- border-width: <border-width-value> {1,4} | {{ Cssxref("inherit", "heredado") }}
-
-
-Valores
-
-
- <border-width-value>
- thin | medium | thick |
{{ Cssxref("length", "largo") }}
- thin
- Un borde fino.
- medium
- Un borde mediano.
- thick
- Un borde grueso.
- <length>
- El grosor de un borde es un valor explícito por lo cual el ancho no puede ser nunca negativo.
- Nota: Un valor em
también es reconocido y soportado.
-
-
-Propiedades relacionadas
-
-
- {{ Cssxref("border-bottom-width") }}
- {{ Cssxref("border-left-width") }}
- {{ Cssxref("border-right-width") }}
- {{ Cssxref("border-top-width") }}
-
-
-Ejemplos
-
-V er el ejemplo en vivo
-
-element {
- border-width: thin;
- border-style: solid;
- border-color: #000;
-}
-
-
-Especificaciones
-
-
-
-Compatibilidad
-
-
-
-
- Navegador
- Versión mínima
-
-
- Internet Explorer
- 4.0
-
-
- Firefox
- 1.0
-
-
- Netscape
-
-
-
- Opera
- 3.5
-
-
-
-
-Ver también
-
-{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}
diff --git a/files/es/web/css/border-width/index.md b/files/es/web/css/border-width/index.md
new file mode 100644
index 00000000000000..3c14c4a297eed8
--- /dev/null
+++ b/files/es/web/css/border-width/index.md
@@ -0,0 +1,77 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border-width
+---
+### Resumen
+
+La propiedad **`border-width`** define el ancho del borde.
+
+- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("medium", "medio") }}
+- Se aplica a: todos los elementos
+- {{ Cssxref("inheritance", "Herencia") }}: no
+- Porcentajes: N/A
+- Medio: {{ Cssxref("Media:Visual", "visual") }}
+- {{ Cssxref("computed value", "Valor calculado") }}: largo absoluto o '0' si el estilo del borde es _ninguno_ ('none') o 'hidden'.
+
+### Sintaxis
+
+```
+ border-width: {1,4} | {{ Cssxref("inherit", "heredado") }}
+```
+
+### Valores
+
+- **\**
+ - : `thin | medium | thick |`{{ Cssxref("length", "largo") }}
+- thin
+ - : Un borde fino.
+- medium
+ - : Un borde mediano.
+- thick
+ - : Un borde grueso.
+- \
+ - : El grosor de un borde es un valor explícito por lo cual el ancho **no** puede ser nunca negativo.
+ Nota: Un valor `em` también es reconocido y soportado.
+
+### Propiedades relacionadas
+
+- {{ Cssxref("border-bottom-width") }}
+- {{ Cssxref("border-left-width") }}
+- {{ Cssxref("border-right-width") }}
+- {{ Cssxref("border-top-width") }}
+
+### Ejemplos
+
+[V](/samples/cssref/border.html)er el ejemplo en vivo
+
+```
+element {
+ border-width: thin;
+ border-style: solid;
+ border-color: #000;
+}
+```
+
+### Especificaciones
+
+- [CSS 1](http://www.w3.org/TR/CSS1#border-width)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#border-width-properties)
+- [CSS 3](http://www.w3.org/TR/css3-background/#border-width)
+
+### Compatibilidad
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 4.0 |
+| Firefox | 1.0 |
+| Netscape | |
+| Opera | 3.5 |
+
+### Ver también
+
+{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}
diff --git a/files/es/web/css/border/index.html b/files/es/web/css/border/index.html
deleted file mode 100644
index 755a64571be8e8..00000000000000
--- a/files/es/web/css/border/index.html
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: border
-slug: Web/CSS/border
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/border
----
-{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}
-
-Propiedades Constitutivas
-
-Esta es una propiedad abreviada para las siguientes propiedades CSS:
-
-
- border-color
- border-style
- border-width
-
-
-
-
-
-
-Resumen
-
-La propiedad border
permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar border
para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.
-
-
- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
- Se aplica a: todos los elementos
- {{ Cssxref("inheritance", "Herencia") }}: no
- Porcentajes: N/A
- Medio: {{ Cssxref("Media:Visual", "visual") }}
- {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales
-
-
-Sintaxis
-
-border: [border-width || border-style || border-color | inherit ] ;
-
-
-Valores
-
-
- {{ Cssxref("border-width") }}.
- {{ Cssxref("border-style") }}.
- {{ Cssxref("border-color") }}.
-
-
-Ejemplos
-
-Ver ejemplo en vivo
-
-element {
- border: 1px solid #000;
-}
-
-
-Notas importantes
-
-Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (border ) no acepta más de uno por cada propiedad.
-
-Especificaciones
-
-
-
-Compatibilidad
-
-
-
-
- Navegador
- Versión mínima
-
-
- Internet Explorer
- 4
-
-
- Firefox
- 1
-
-
- Netscape
- 4
-
-
- Opera
- 3.5
-
-
-
-
-Ver también
-
-{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}
-
-Descripción
-
-Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a border-image
no puede ser realizada mediante el uso de border
, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a none
.
-
-La propiedad abreviada border
es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) border-width
, border-style
y border-color
puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. border-top)
y lógicas (p. ej. border-block-start
) del borde.
-
-Bordes vs. contornos
-
-Los bordes y los contornos son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:
-
-
- Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento.
- De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo.
-
diff --git a/files/es/web/css/border/index.md b/files/es/web/css/border/index.md
new file mode 100644
index 00000000000000..fa3e21d6781c5d
--- /dev/null
+++ b/files/es/web/css/border/index.md
@@ -0,0 +1,89 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/border
+---
+{{ PreviousNext("Guía de referencia de CSS", "CSS:border-color") }}
+
+### Propiedades Constitutivas
+
+Esta es una [propiedad abreviada](/es/docs/Web/CSS/Shorthand_properties) para las siguientes propiedades CSS:
+
+- border-color
+- border-style
+- border-width
+
+### Resumen
+
+La propiedad `border` permite definir en una única regla todos los bordes de los elementos seleccionados. Se puede utilizar `border` para definir el o los valores siguientes: {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}.
+
+- {{ Cssxref("initial", "Valor inicial") }}: ver propiedades individuales
+- Se aplica a: todos los elementos
+- {{ Cssxref("inheritance", "Herencia") }}: no
+- Porcentajes: N/A
+- Medio: {{ Cssxref("Media:Visual", "visual") }}
+- {{ Cssxref("computed value", "Valor calculada") }}: ver propiedades individuales
+
+### Sintaxis
+
+```
+border: [border-width || border-style || border-color | inherit] ;
+```
+
+### Valores
+
+{{ Cssxref("border-width") }}.
+
+{{ Cssxref("border-style") }}.
+
+{{ Cssxref("border-color") }}.
+
+### Ejemplos
+
+[Ver ejemplo en vivo](/samples/cssref/border.html)
+
+```
+element {
+ border: 1px solid #000;
+}
+```
+
+### Notas importantes
+
+Mientras que las propiedades {{ Cssxref("border-width") }}, {{ Cssxref("border-style") }} y {{ Cssxref("border-color") }} admiten hasta cuatro valores diferentes, ésta (_border_) no acepta más de uno por cada propiedad.
+
+### Especificaciones
+
+- [CSS 1](http://www.w3.org/TR/CSS1#border)
+- [CSS 2.1](http://www.w3.org/TR/CSS21/box.html#box-border-area)
+- [CSS 3](http://www.w3.org/TR/css3-background/#the-border-shorthands)
+
+### Compatibilidad
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 4 |
+| Firefox | 1 |
+| Netscape | 4 |
+| Opera | 3.5 |
+
+### Ver también
+
+{{ Cssxref("border") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-width") }}
+
+### Descripción
+
+Como sucede con todas las propiedades abreviadas, cualquier subvalor omitdo será definido a su valor inicial. Cabe destacar que la asignación de un valor personalizado a `border-image` no puede ser realizada mediante el uso de `border`, en todo caso éste útltimo lo fijaría a su valor inicial, por ejemplo, a `none`.
+
+La propiedad abreviada `border` es especialmente útil cuando deseas que los cuatro bordes sean idénticos. Sin embargo, es posible hacerlos distintos utilzando las propiedades extensas (aquellas individuales que componen a la abreviada) `border-width`, `border-style` y `border-color` puesto que aceptan valores distintos por lado. Alternativamente, puedes modificar un borde a la vez con las propiedades físicas (p. ej. `border-top)` y lógicas (p. ej. `border-block-start`) del borde.
+
+### Bordes vs. contornos
+
+Los bordes y los [contornos](/es/docs/Web/CSS/outline) son muy parecidos. Sin embargo, los contornos se distinguen de los bordes de la siguiente forma:
+
+- Los conronos nunca toman espacio, ya que se dibujan fuera del contenido de un elemento.
+- De conformidad con las especificaciones, si bien los contornos suelen ser rectangulares, no necesitan serlo.
diff --git a/files/es/web/css/bottom/index.html b/files/es/web/css/bottom/index.html
deleted file mode 100644
index 2941fe78b96d0f..00000000000000
--- a/files/es/web/css/bottom/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: bottom
-slug: Web/CSS/bottom
-tags:
- - CSS
- - 'CSS:Referencias'
- - Todas_las_Categorías
-translation_of: Web/CSS/bottom
----
-
-
<< Volver
-
- Resumen
-La propiedad bottom
especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).
-
Para los elementos con una posición absoluta (aquellos que tienen la propiedad position: absolute
o position: fixed
), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor.
-
Para los elementos con una posición relativa (los que tienen la propiedad position: relative
), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si top
no es auto
, el valor computado de bottom
es el valor negativo del valor computado de top
.
-
- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}
- Se aplica a: {{ Cssxref("position", "la posición de los elementos") }}
- {{ Cssxref("inheritance", "Heredado") }}: no
- Porcentajes: se refieren a la altura del bloque contenedor.
- Medio: {{ Cssxref("Media:Visual", "visual") }}
- {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto.
-
- Sintaxis
- bottom: <length> | <percentage> | auto | inherit
-
- Valores
- <length> Una longitud, usada como se describe en el resumen . Puede ser un valor negativo, cero o un valor positivo.
- <percentage> Un porcentaje de la altura del bloque contenedor, usado como se describe en el resumen .
- auto
Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata height: auto
como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, top
es también auto
, no se produce desplazamiento alguno.
- inherit
Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor <length>, <percentage> o auto
.
-
- Ejemplos
-element {
- position: absolute;
- bottom: 20px;
- height: 200px;
- border: 1px solid #000;
-}
-
-El siguiente ejemplo permite contrastar entre position:absolute
y position:fixed
. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con position:absolute
se desplazarán junto con la página, mientras que los bloques posicionados con position:fixed
, no lo harán.
-
-Atención : IE6 no soporta el código position:fixed
.
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
- "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-<head>
-<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
-<title>Position at bottom, absolute or fixed</title>
-<style type="text/css">
-p {font-size:30px; line-height:3em;}
-div.pos {width:49%; text-align:center; border:2px solid #00f;}
-div#abs {position:absolute; bottom:0; left:0;}
-div#fix {position:fixed; bottom:0; right:0;}
-</style>
-</head>
-<body>
- <p>Esto<br>es<br>un texto<br>alto,<br>alto,
- <br>alto,<br>alto,<br>alto<br>de prueba.</p>
- <div id="fix" class="pos"><p>Fixed</p></div>
- <div id="abs" class="pos"><p>Absolute</p></div>
-</body>
-</html>
- Notas
-Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento.
-
Para los elementos posicionados de forma absoluta, la propiedad bottom
no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} no son auto
(que es el valor por defecto para top
y height
).
-
- Especificaciones
-
- Compatibilidad entre navegadores
- Navegador Versión mínima Internet Explorer 5 Firefox 1 Netscape 6 Opera 6
-
- Ver también
-{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }}
-
-
-
-{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }}
diff --git a/files/es/web/css/bottom/index.md b/files/es/web/css/bottom/index.md
new file mode 100644
index 00000000000000..46c0e95528eaff
--- /dev/null
+++ b/files/es/web/css/bottom/index.md
@@ -0,0 +1,112 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+ - CSS
+ - CSS:Referencias
+ - Todas_las_Categorías
+translation_of: Web/CSS/bottom
+---
+<< [Volver](es/Gu%c3%ada_de_referencia_de_CSS)
+
+### Resumen
+
+La propiedad `bottom` especifica parte de la posición de un elemento (posicionado - es decir, con una posición determinada por código).
+
+Para los elementos con una posición absoluta (aquellos que tienen la propiedad `position: absolute` o `position: fixed`), la propiedad bottom determina la distancia entre el borde inferior del elemento y el borde inferior de su bloque contenedor.
+
+Para los elementos con una posición relativa (los que tienen la propiedad `position: relative`), la propiedad bottom determina la distancia que el elemento se mueve hacia arriba desde su posición normal. Sin embargo, la propiedad {{ Cssxref("top") }} se antepone a la propiedad bottom, por lo que si `top` no es `auto`, el valor computado de `bottom` es el valor negativo del valor computado de `top`.
+
+- {{ Cssxref("initial", "Valor inicial") }}: {{ Cssxref("auto", "automático") }}
+- Se aplica a: {{ Cssxref("position", "la posición de los elementos") }}
+- {{ Cssxref("inheritance", "Heredado") }}: no
+- Porcentajes: se refieren a la altura del bloque contenedor.
+- Medio: {{ Cssxref("Media:Visual", "visual") }}
+- {{ Cssxref("computed value", "Valor calculada") }}: valor absoluto, porcentaje o auto.
+
+### Sintaxis
+
+```
+ bottom: | | auto | inherit
+```
+
+### Valores
+
+- \
+ - : Una longitud, usada como se describe en el [resumen](#Resumen). Puede ser un valor negativo, cero o un valor positivo.
+- \
+ - : Un porcentaje de la altura del bloque contenedor, usado como se describe en el [resumen](#Resumen).
+- `auto`
+ - : Para los elementos con posición absoluta, el elemento se posiciona en base a la propiedad {{ Cssxref("top") }} y por tanto se trata `height: auto` como una altura basada en el contenido del elemento. Para los elementos posicionados como relativos, especifica un desplazamiento desde su posición normal basada en la propiedad {{ Cssxref("top") }} o si, `top` es también `auto`, no se produce desplazamiento alguno.
+- `inherit`
+ - : Recoge el valor que tenga el elemento padre (que puede no ser el bloque contenedor). Este valor calculado es tratado como si fuera un valor \, \ o `auto`.
+
+### Ejemplos
+
+```
+element {
+ position: absolute;
+ bottom: 20px;
+ height: 200px;
+ border: 1px solid #000;
+}
+```
+
+El siguiente ejemplo permite contrastar entre `position:absolute` y `position:fixed`. Cuando el texto ocupa un espacio más alto que la porción visible de la página (la porción visible en la ventana del navegador) los bloques posicionados con `position:absolute` se desplazarán junto con la página, mientras que los bloques posicionados con `position:fixed`, no lo harán.
+
+- **Atención**: IE6 **no** soporta el código `position:fixed`.
+
+```
+
+
+
+
+Position at bottom, absolute or fixed
+
+
+
+ Esto es un texto alto, alto,
+ alto, alto, alto de prueba.
+
+
+
+
+```
+
+### Notas
+
+Para los elementos posicionados de forma absoluta cuyo bloque contenedor sea un elemento de tipo bloque, esta propiedad es un desplazamiento a partir del borde de relleno (padding) de dicho elemento.
+
+Para los elementos posicionados de forma absoluta, la propiedad `bottom` no tiene efectos visibles cuando los valores {{ Cssxref("top") }}, {{ Cssxref("height") }}, y {{ Cssxref("margin-top") }} _no_ son `auto` (que es el valor por defecto para `top` y `height`).
+
+### Especificaciones
+
+- [CSS 2.1 (en)](http://www.w3.org/TR/CSS21/visuren.html#propdef-bottom)
+- [CSS 3 (en)](http://www.w3.org/Style/CSS/current-work#positioning)
+
+### Compatibilidad entre navegadores
+
+This is as far back as the documentaion goes.
+
+| Navegador | Versión mínima |
+| ----------------- | -------------- |
+| Internet Explorer | 5 |
+| Firefox | 1 |
+| Netscape | 6 |
+| Opera | 6 |
+
+### Ver también
+
+{{ Cssxref("position") }}, {{ Cssxref("top") }}, {{ Cssxref("right") }}, {{ Cssxref("left") }}
+
+Categorías
+
+Interwiki Languages
+
+{{ languages( { "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "en": "en/CSS/bottom" } ) }}
diff --git a/files/es/web/css/box-flex/index.html b/files/es/web/css/box-flex/index.html
deleted file mode 100644
index 8897a726b281ba..00000000000000
--- a/files/es/web/css/box-flex/index.html
+++ /dev/null
@@ -1,108 +0,0 @@
----
-title: '-moz-box-flex'
-slug: Web/CSS/box-flex
-tags:
- - CSS
- - No estándar(2)
- - Referencia CSS
-translation_of: Web/CSS/box-flex
-original_slug: Web/CSS/-moz-box-flex
----
-{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles 'box-flex
' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex
' (que se basa en esos borradores).")}}
-
-Ver Flexbox para más información acerca de qué usar en vez de esta propiedad.
-
-Resumen
-
-Las propiedades CSS -moz-box-flex
y -webkit-box-flex
especifican cómo una -moz-box
o -webkit-box
crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver Flexbox para más información sobre las propiedades de los elementos flexbox.
-
-{{cssinfo}}
-
-Síntaxis
-
-/* Valores <number> */
--moz-box-flex: 0;
--moz-box-flex: 3;
--webkit-box-flex: 0;
--webkit-box-flex: 3;
-
-/* Valores gloables */
--moz-box-flex: inherit;
--moz-box-flex: initial;
--moz-box-flex: unset;
-
-
-Valores
-
-
- 0
- La caja no crece.
- > 0
- La caja crece para rellenar un proporción del espacio disponible..
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-<!DOCTYPE html>
-<html>
- <head>
- <title>Ejemplo de -moz-box-flex</title>
- <style>
- div.example {
- display: -moz-box;
- display: -webkit-box;
- border: 1px solid black;
- width: 100%;
- }
- div.example > p:nth-child(1) {
- -moz-box-flex: 1; /* Mozilla */
- -webkit-box-flex: 1; /* WebKit */
- border: 1px solid black;
- }
- div.example > p:nth-child(2) {
- -moz-box-flex: 0; /* Mozilla */
- -webkit-box-flex: 0; /* WebKit */
- border: 1px solid black;
- }
- </style>
- </head>
- <body>
- <div class="example">
- <p>Creceré para rellenar un espacio extra</p>
- <p>No creceré</p>
- </div>
- </body>
-</html>
-
-
-Notas
-
-La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.
-
-Los elementos dentro del contenedor que tienen 0 flex no crecen.
-
-Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.
-
-Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.
-
-Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.
-
-Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo equalsize
de la caja contenedora a always
. Este atributo no tiene correspondencia con ninguna propiedad CSS.
-
-Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo height: 0
), y el mismo valor box-flex mayor que cero a todos (por ejemplo -moz-box-flex: 1
).
-
-Especificaciones
-
-Esta propiedad es una extensión no estándar. Había una old draft of the CSS3 Flexbox specification que definía una propiedadbox-flex
, pero ese borrador nunca ha sido sustituido.
-
-Compatibilidad con los distintos navegadores
-
-{{Compat("css.properties.box-flex")}}
-
-Ver además
-
-{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}
diff --git a/files/es/web/css/box-flex/index.md b/files/es/web/css/box-flex/index.md
new file mode 100644
index 00000000000000..1d0b46043c5797
--- /dev/null
+++ b/files/es/web/css/box-flex/index.md
@@ -0,0 +1,108 @@
+---
+title: '-moz-box-flex'
+slug: Web/CSS/box-flex
+tags:
+ - CSS
+ - No estándar(2)
+ - Referencia CSS
+translation_of: Web/CSS/box-flex
+original_slug: Web/CSS/-moz-box-flex
+---
+{{CSSRef}}{{warning("Esta propiedad es para controlar parte del modelo de caja XUL. No coincide ni con el antiguo borrador del módulo CSS para el diseño de caja flexibles 'box-flex
' (que se basa en esta propiedad) ni con el comportamiento de '-webkit-box-flex
' (que se basa en esos borradores).")}}
+
+Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información acerca de qué usar en vez de esta propiedad.
+
+## Resumen
+
+Las propiedades [CSS](/es/docs/Web/CSS)`-moz-box-flex` y `-webkit-box-flex` especifican cómo una `-moz-box` o `-webkit-box` crecen para rellenar la caja que los contienen, en la dirección del diseño o esquema (layout) de la caja contenedora.Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información sobre las propiedades de los elementos flexbox.
+
+{{cssinfo}}
+
+## Síntaxis
+
+```css
+/* Valores */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Valores gloables */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+```
+
+### Valores
+
+- 0
+ - : La caja no crece.
+- \> 0
+ - : La caja crece para rellenar un proporción del espacio disponible..
+
+### Síntaxis Formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+```html
+
+
+
+ Ejemplo de -moz-box-flex
+
+
+
+
+
Creceré para rellenar un espacio extra
+
No creceré
+
+
+
+```
+
+## Notas
+
+La caja contenedora asigna el espacio extra disponible de manera proporcional al valor flex de cada uno de los elementos que contiene.
+
+Los elementos dentro del contenedor que tienen 0 flex no crecen.
+
+Si śolo uno de los elementos tiene un valor distinto de cero ocupará todo el espacio disponible.
+
+Los elementos que tienen el mismo valor para flex crecen en la misma cantidad en términos absolutos.
+
+Si el valor flex se ha establecido usando el atributo flex del elemento, entonces el estilo es ignorado.
+
+Para hacer que los elementos XUL dentro de una caja contenedora tengan el mismo tamaño, fijaremos el atributo `equalsize`de la caja contenedora a `always`. Este atributo no tiene correspondencia con ninguna propiedad CSS.
+
+Un truco para hacer que todos los elementos dentro una caja contenedora tengan el mismo tamaño es darles un tamaño fijo,(por ejemplo `height: 0`), y el mismo valor box-flex mayor que cero a todos (por ejemplo `-moz-box-flex: 1`).
+
+## Especificaciones
+
+Esta propiedad es una extensión no estándar. Había una [old draft of the CSS3 Flexbox specification](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/) que definía una propiedad`box-flex` , pero ese borrador nunca ha sido sustituido.
+
+## Compatibilidad con los distintos navegadores
+
+{{Compat("css.properties.box-flex")}}
+
+## Ver además
+
+{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}
diff --git a/files/es/web/css/box-ordinal-group/index.html b/files/es/web/css/box-ordinal-group/index.html
deleted file mode 100644
index a5c8faafdcb6ce..00000000000000
--- a/files/es/web/css/box-ordinal-group/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: '-moz-box-ordinal-group'
-slug: Web/CSS/box-ordinal-group
-tags:
- - CSS
- - 'CSS: Extensiones Mozilla'
- - Caja Flexible
- - No estandar
- - Referencia CSS
-translation_of: Web/CSS/box-ordinal-group
-translation_of_original: Web/CSS/-moz-box-ordinal-group
-original_slug: Web/CSS/-moz-box-ordinal-group
----
-{{CSSRef}}
- {{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}
-
-Ver Flexbox para más información sobre qué usar en sustitución de esta propiedad.
-
-Resumen
-
-Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.
-
-Valores
-
-Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.
-
-Ejemplos
-
-<style type="text/css">
- #Flexbox {
- display: -ms-box;
- display: -moz-box;
- display: -webkit-box;
- }
-
- #text1 {
- background: red;
- -ms-box-ordinal-group: 4;
- -moz-box-ordinal-group: 4;
- -webkit-box-ordinal-group: 4;
- }
-
- #text2 {
- background: green;
- -ms-box-ordinal-group: 3;
- -moz-box-ordinal-group: 3;
- -webkit-box-ordinal-group: 3;
- }
-
- #text3 {
- background: blue;
- -ms-box-ordinal-group: 2;
- -moz-box-ordinal-group: 2;
- -webkit-box-ordinal-group: 2;
- }
-
- #text4 {
- background: orange;
- }
-</style>
-
-<div id="Flexbox">
- <div id="text1">text 1</div>
- <div id="text2">text 2</div>
- <div id="text3">text 3</div>
- <div id="text4">text 4</div>
-</div>
-
diff --git a/files/es/web/css/box-ordinal-group/index.md b/files/es/web/css/box-ordinal-group/index.md
new file mode 100644
index 00000000000000..f0be6f28fdb27d
--- /dev/null
+++ b/files/es/web/css/box-ordinal-group/index.md
@@ -0,0 +1,69 @@
+---
+title: '-moz-box-ordinal-group'
+slug: Web/CSS/box-ordinal-group
+tags:
+ - CSS
+ - 'CSS: Extensiones Mozilla'
+ - Caja Flexible
+ - No estandar
+ - Referencia CSS
+translation_of: Web/CSS/box-ordinal-group
+translation_of_original: Web/CSS/-moz-box-ordinal-group
+original_slug: Web/CSS/-moz-box-ordinal-group
+---
+{{CSSRef}}
+{{warning("Esta propiedad pertenece al borrador original del diseño o esquema de la caja CSS flexible, y ha sido reemplazada en borradores posteriores.")}}
+
+Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información sobre qué usar en sustitución de esta propiedad.
+
+## Resumen
+
+Indica el grupo ordinal al que pertenece el elemento. Aquellos elementos con un grupo ordinal menor son mostrados antes que aquellos con un grupo ordinal mayor.
+
+## Valores
+
+Los valores deben ser enteros positivos (mayores de cero). El valor por defecto para esta propiedad es 1.
+
+## Ejemplos
+
+```html
+
+
+
+
text 1
+
text 2
+
text 3
+
text 4
+
+```
diff --git a/files/es/web/css/box-pack/index.html b/files/es/web/css/box-pack/index.html
deleted file mode 100644
index a6312cf536a7ff..00000000000000
--- a/files/es/web/css/box-pack/index.html
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: '-moz-box-pack'
-slug: Web/CSS/box-pack
-tags:
- - CSS
- - Diseño
- - No estándar(2)
- - Propiedad CSS
- - Referencia CSS
-translation_of: Web/CSS/box-pack
-original_slug: Web/CSS/-moz-box-pack
----
-{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
-
-Ver Flexbox para más información.
-
-Resumen
-
-Las propiedades CSS -moz-box-pack
y -webkit-box-pack
especifican cómo una -moz-box
o un -webkit-box
empaquetan o disponen su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver Flexbox para más información sobre las propiedades de los elementos flexbox.
-
-La dirección del esquema o diseño (layout) depende de la orientación del elemento: vertical o horizontal.
-
-{{cssinfo}}
-
-Síntaxis
-
-/* Valores de palabras clave */
--moz-box-pack: start;
--moz-box-pack: center;
--moz-box-pack: end;
--moz-box-pack: justify;
-
-/* Valores gloables */
--moz-box-pack: inherit;
--moz-box-pack: initial;
--moz-box-pack: unset;
-
-
-Valores
-
-
- start
- La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
- center
- La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
- end
- La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
- justify
- El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera start
.
-
-
-
-
-{{csssyntax}}
-
-Ejemplos
-
-div.example {
- border-style: solid;
-
- display: -moz-box; /* Mozilla */
- display: -webkit-box; /* WebKit */
-
- /* Hace esta caja más alta que los hijos para que haya hueco suficiente
- para el empaquetado en la caja */
- height: 300px;
- /* Hace la caja lo suficientemente ancha para mostrar los contenidos
- centrados horizontalmente */
- width: 300px;
-
- /* Los hijos deberían estar orientados verticalmente */
- -moz-box-orient: vertical; /* Mozilla */
- -webkit-box-orient: vertical; /* WebKit */
-
- /* Alínea los hijos con el centro horizontal de la caja */
- -moz-box-align: center; /* Mozilla */
- -webkit-box-align: center; /* WebKit */
-
- /* Dispone a los hijos en el fondo de la caja */
- -moz-box-pack: end; /* Mozilla */
- -webkit-box-pack: end; /* WebKit */
-}
-
-div.example p {
- /* hace los hijos más estrechos que el padra para que
- haya espacio suficiente para el box-align */
- width: 200px;
-}
-
-
-<div class="example">
- <p>Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.</p>
- <p>Estaré en el fondo de div.example y centrado horizontalmente.</p>
-</div>
-
-
-{{EmbedLiveSample('Examples', 310, 310)}}
-
-Notas
-
-EL borde de la caja que será tomado como start para el empqeutado dependerá de la orientación y dirección de la caja:
-
-
-
-
-
- Normal
- Reverse
-
-
- Horizontal
- left
- right
-
-
- Vertical
- top
- bottom
-
-
-
-
-El borde opuesto a start será el considerado como end .
-
-Si el empaquetado se establece usando el atributo pack
del elemento el estilo es ignorado.
-
-Especificaciones
-
-Esta propiedad es no estándar aunque una propiedad similar apareción en draft of CSS3 Flexbox , que a su vez ha sido sustituida para nuevas versiones de la especificación.
-
-Compatibilidad con los distintos navegadores
-
-{{Compat("css.properties.box-pack")}}
-
-Ver además
-
-{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}
diff --git a/files/es/web/css/box-pack/index.md b/files/es/web/css/box-pack/index.md
new file mode 100644
index 00000000000000..89af631f5eee45
--- /dev/null
+++ b/files/es/web/css/box-pack/index.md
@@ -0,0 +1,123 @@
+---
+title: '-moz-box-pack'
+slug: Web/CSS/box-pack
+tags:
+ - CSS
+ - Diseño
+ - No estándar(2)
+ - Propiedad CSS
+ - Referencia CSS
+translation_of: Web/CSS/box-pack
+original_slug: Web/CSS/-moz-box-pack
+---
+{{CSSRef}}{{warning("Esta propiedad es parte del módulo estándar original para el diseño de las cajas CSS Flexible que fue sustituida por un nuevo estándar.")}}
+
+Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) para más información.
+
+## Resumen
+
+Las propiedades [CSS](/es/docs/Web/CSS)`-moz-box-pack` y `-webkit-box-pack` especifican cómo una `-moz-box` o un `-webkit-box` empaquetan o disponen su contenido en la dirección de su diseño o esquema. El efecto de esto sólo es visible si hay expacio extra en la caja. Ver [Flexbox](/es/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Flexible_box_properties) para más información sobre las propiedades de los elementos flexbox.
+
+La dirección del esquema o diseño (layout) depende de la orientación del elemento: vertical o horizontal.
+
+{{cssinfo}}
+
+## Síntaxis
+
+```css
+/* Valores de palabras clave */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Valores gloables */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+```
+
+### Valores
+
+- `start`
+ - : La caja empaqueta o muestra el contenido al principio dejando el espacio libre que hubiera al final.
+- `center`
+ - : La caja empaqueta o muestra el contenido en el centro dejando el espacio libre que hubiera dividido de igual manera entre el inicio y el final.
+- `end`
+ - : La caja empaqueta o muestra el contenido al final dejando el espacio libre que hubiera al principio.
+- `justify`
+ - : El espacio se divide de igual manera entre los diferentes hijos sin dejar nada del espacio libre ni antes del primer hijo ni después del último. Si sólo hay un hijo el comportamiento es como si fuera `start`.
+
+### Síntaxis Formal
+
+{{csssyntax}}
+
+## Ejemplos
+
+```css
+div.example {
+ border-style: solid;
+
+ display: -moz-box; /* Mozilla */
+ display: -webkit-box; /* WebKit */
+
+ /* Hace esta caja más alta que los hijos para que haya hueco suficiente
+ para el empaquetado en la caja */
+ height: 300px;
+ /* Hace la caja lo suficientemente ancha para mostrar los contenidos
+ centrados horizontalmente */
+ width: 300px;
+
+ /* Los hijos deberían estar orientados verticalmente */
+ -moz-box-orient: vertical; /* Mozilla */
+ -webkit-box-orient: vertical; /* WebKit */
+
+ /* Alínea los hijos con el centro horizontal de la caja */
+ -moz-box-align: center; /* Mozilla */
+ -webkit-box-align: center; /* WebKit */
+
+ /* Dispone a los hijos en el fondo de la caja */
+ -moz-box-pack: end; /* Mozilla */
+ -webkit-box-pack: end; /* WebKit */
+}
+
+div.example p {
+ /* hace los hijos más estrechos que el padra para que
+ haya espacio suficiente para el box-align */
+ width: 200px;
+}
+```
+
+```html
+
+
Será el segundo empezando desde el fondo de div.example y centrado horizontalmente.
+
Estaré en el fondo de div.example y centrado horizontalmente.
+
+```
+
+{{EmbedLiveSample('Examples', 310, 310)}}
+
+## Notas
+
+EL borde de la caja que será tomado como _start_ para el empqeutado dependerá de la orientación y dirección de la caja:
+
+| | **Normal** | **Reverse** |
+| -------------- | ---------- | ----------- |
+| **Horizontal** | left | right |
+| **Vertical** | top | bottom |
+
+El borde opuesto a start será el considerado como _end_.
+
+Si el empaquetado se establece usando el atributo `pack` del elemento el estilo es ignorado.
+
+## Especificaciones
+
+Esta propiedad es no estándar aunque una propiedad similar apareción en [draft of CSS3 Flexbox](http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/), que a su vez ha sido sustituida para nuevas versiones de la especificación.
+
+## Compatibilidad con los distintos navegadores
+
+{{Compat("css.properties.box-pack")}}
+
+## Ver además
+
+{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}
diff --git a/files/es/web/css/box-shadow/index.html b/files/es/web/css/box-shadow/index.html
deleted file mode 100644
index 8b9921ffcff5be..00000000000000
--- a/files/es/web/css/box-shadow/index.html
+++ /dev/null
@@ -1,178 +0,0 @@
----
-title: box-shadow
-slug: Web/CSS/box-shadow
-tags:
- - CSS
- - CSS Background
- - Estilos
- - Reference
- - Referencia
- - Sombras
- - box-shadow
-translation_of: Web/CSS/box-shadow
----
-{{ CSSRef() }}
-
-La propiedad CSS box-shadow
añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.
-
-El código fuente de este ejemplo interactivo se encuentra almacenado en un repositorio de GitHub. Si desea contribuir al poryecto de ejemplos interactivos, por favor clone el repositiorio https://github.com/mdn/interactive-examples y envie un pull request.
-
-La propiedad box-shadow
permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples sombras de texto (la primera sombra definida se ubica hasta arriba).
-
-Generador de Box-shadow es una herramienta interactiva que permite generar una box-shadow
.
-
-Sintaxis
-
-
-box-shadow : none;
-
-
-box-shadow : 60 px -16 px teal;
-
-
-box-shadow : 10 px 5 px 5 px black;
-
-
-box-shadow : 2 px 2 px 2 px 1 px rgba ( 0 , 0 , 0 , 0.2 ) ;
-
-
-box-shadow : inset 5 em 1 em gold;
-
-
-box-shadow : 3 px 3 px red, -1 em 0 0.4 em olive;
-
-
-box-shadow : inherit;
-box-shadow : initial;
-box-shadow : unset;
-
-Especifica una sola box-shadow utilizando:
-
-
- Dos, tres, o cuatro valores <length>
.
-
-
-
- Opcionalmente, la palabra clave inset
.
- Opcionalmente, el valor <color>
.
-
-
-Valores
-
-
- inset
- Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).
- La presencia de la palabra clave inset
cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.
- <offset-x> <offset-y>
- Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. <offset-x>
especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. <offset-y>
Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.
- Si ambos valores son 0
, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación <blur-radius>
y/o <spread-radius>
está establecido).
- <blur-radius>
- Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será 0
(el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:
-
-
-
-...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.
-
-
-
- <spread-radius>
- Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será 0
(la sombra será del mismo tamaño del elemento).
- <color>
- Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.
- Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.
-
-
-Ejemplos
-
-En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).
-
-HTML
-
-< blockquote> < q> You may shoot me with your words,< br/>
-You may cut me with your eyes,< br/>
-You may kill me with your hatefulness,< br/>
-But still, like air, I'll rise.</ q>
-< p> — Maya Angelou</ p>
-</ blockquote>
-
-
-Podrías dispararme con tus palabras,
- podrías cortarme con tus ojos,
- podrías matarme con tu odio,
- y aún, como el aire, levantarme.
- -Traduccion-
-
-CSS
-
-blockquote {
- padding : 20 px ;
- box-shadow :
- inset 0 -3 em 3 em rgba ( 0 , 0 , 0 , 0.1 ) ,
- 0 0 0 2 px rgb ( 255 , 255 , 255 ) ,
- 0.3 em 0.3 em 1 em rgba ( 0 , 0 , 0 , 0.3 ) ;
-}
-
-{{EmbedLiveSample('Examples1', '300', '300')}}
-
-
-
HTML
-
-
< div> < p> Hello World</ p> </ div>
-
-
-CSS
-
-p {
- box-shadow : 0 0 0 2 em #F4AAB9 ,
- 0 0 0 4 em #66CCFF ;
- margin : 4 em ;
- padding : 1 em ;
-}
-
-{{EmbedLiveSample('Examples2', '300', '300')}}
-
-Cuando el x-offset
, y-offset
, y blur
son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el border-radius
es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un border-radius
de cualquier otro valor, las esquinas habrían sido redondeadas.
-
-Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del modelo de caja .
-
-
-
-Especificaciones
-
-
-
-
- Especificación
- Estado
- Comentario
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}
- {{Spec2('CSS3 Backgrounds')}}
- Definición inicial
-
-
-
-
-cssinfo}}
-
-Compatibilidad de los navegadores
-
-
-
-{{Compat("css.properties.box-shadow")}}
-
-Ver también
-
-
- El tipo de dato {{cssxref("<color>")}}
- Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
- {{cssxref("text-shadow")}}
- Aplicando color a los elementos HTML utilizando CSS
-
diff --git a/files/es/web/css/box-shadow/index.md b/files/es/web/css/box-shadow/index.md
new file mode 100644
index 00000000000000..b612e2c8292262
--- /dev/null
+++ b/files/es/web/css/box-shadow/index.md
@@ -0,0 +1,148 @@
+---
+title: box-shadow
+slug: Web/CSS/box-shadow
+tags:
+ - CSS
+ - CSS Background
+ - Estilos
+ - Reference
+ - Referencia
+ - Sombras
+ - box-shadow
+translation_of: Web/CSS/box-shadow
+---
+{{ CSSRef() }}
+
+La propiedad CSS `box-shadow` añade efectos de sombra alrededor del marco de un elemento. Se pueden definir múltiples efectos separados por comas. La caja de la sombra se describe por los desplazamientos en X e Y, los radios de desenfoque y dispersión, y el color relativos al elemento.
+
+La propiedad `box-shadow` permite proyectar una sombra difuminada desde el marco de casi cualquier elemento. Si {{cssxref("border-radius")}} es especificado en un elemento con la propiedad box-shadow, la sombra adopta la misma curva en las esquinas. El z-orden de múltiples cajas de sombra es la misma que de múltiples [sombras de texto](https://developer.mozilla.org/en-US/CSS/text-shadow) (la primera sombra definida se ubica hasta arriba).
+
+[Generador de Box-shadow](/es/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator) es una herramienta interactiva que permite generar una `box-shadow`.
+
+## Sintaxis
+
+```css
+/* Keyword values */
+box-shadow: none;
+
+/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Global keywords */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+```
+
+Especifica una sola box-shadow utilizando:
+
+- Dos, tres, o cuatro valores [``](https://developer.mozilla.org/en-US/docs/Web/CSS/length).
+
+ - Si solo dos valores son definidos, son interpretados como valores [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#offset-x).
+ - Si un tercer valor es dado, es interpretado como un [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#blur-radius).
+ - Si un cuarto valor es dado, es interpretado como un [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#spread-radius).
+
+- Opcionalmente, la palabra clave [`inset`](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#inset).
+- Opcionalmente, el valor [``](https://developer.mozilla.org/es/docs/Web/CSS/box-shadow$edit#color).
+
+### Valores
+
+- `inset`
+ - : Si no se especifica (por defecto), la sombra asume una sombra difuminada (como si la caja fuera levantada por encima del contenido).
+ La presencia de la palabra clave `inset` cambia la sombra a una dentro del marco (como si el contenido estuviera deprimido dentro de la caja). Inset shadows dibuja dentro del borde (incluso de los transparentes), por encima del fondo, pero por debajo del contenido.
+- ` `
+ - : Estos son dos valores {{cssxref("<length>")}} para definir el desplazamiento de la sombra. `` especifica la distancia horizontal. Los valores negativos colocan las combra a la izquierda de el elemento. `` Especifica la distancia vertical. Los valores negativos colocan la sombra por encima del elemento. Ver{{cssxref("<length>")}} para posibles unidades.
+ Si ambos valores son `0`, la sombra es ubicada detras del elemento (y puede generar un efecto de difuminación `` y/o `` está establecido).
+- ``
+ - : Este es el tercer valor {{cssxref("<length>")}}. Cuando mayor sea este valor, mayor sera la difuminación, por consecuencia la sombra se vuelve más grande y ligera. Los valores negativos no son permitidos. Si esto no es especificado, su valor será `0` (el borde de la sombra es fuerte). La especificación no incluye un algoritmo exacto para como el radio de desenfoque debe ser calculado, sin embargo, explica lo siguiente:
+
+> ...para una borde largo y recto de la sombra, se debería crear una transición de color con la longitud de la distancia de desenfoque que sea perpendicular a y centrada al borde de la sombra, y en estos rangos desde el color de la sombra total en el punto final del radio dentro de la sombra hasta totalmente transparente en el punto final fuera de ella.
+
+- ``
+ - : Este es el cuarto valor {{cssxref("<length>")}} . Los valores positivos harán que la sombra se expanda y crezca más, los valores negativos harán que la sombra se reduzca de tamaño. Si no se especifica, este será `0` (la sombra será del mismo tamaño del elemento).
+- ``
+ - : Ver los valores de {{cssxref("<color>")}} para las posibles palabras claves y anotaciones.
+ Si no se especifica, el color depende del navegador - usualmente el valor de la propiedad {{ cssxref("color") }}, pero notar que en Safari, actualmente pinta una sombra transparente en este caso que sea omitido.
+
+## Ejemplos
+
+En nuestro ejemplo, se incluyen tres sombras: una sombra interior, una sombra difuminada normal, y una sombra de 2px que crea un efecto de borde (podría haberse usado un {{cssxref('outline')}} en lugar de una tercera sombra).
+
+```html
+You may shoot me with your words,
+You may cut me with your eyes,
+You may kill me with your hatefulness,
+But still, like air, I'll rise.
+— Maya Angelou
+
+```
+
+_Podrías dispararme con tus palabras,
+podrías cortarme con tus ojos,
+podrías matarme con tu odio,
+y aún, como el aire, levantarme._
+\-Traduccion-
+
+```css
+blockquote {
+ padding: 20px;
+ box-shadow:
+ inset 0 -3em 3em rgba(0,0,0,0.1),
+ 0 0 0 2px rgb(255,255,255),
+ 0.3em 0.3em 1em rgba(0,0,0,0.3);
+}
+```
+
+{{EmbedLiveSample("", '300', '300')}}
+
+### Contorno uniforme
+
+```html
+
+```
+
+```css
+p {
+ box-shadow: 0 0 0 2em #F4AAB9,
+ 0 0 0 4em #66CCFF;
+ margin: 4em;
+ padding:1em;
+}
+```
+
+{{EmbedLiveSample("", '300', '300')}}
+
+Cuando el `x-offset`, `y-offset`, y `blur` son todos cero, la sombra sera un contorno unifrome. Las sombras son dibujadas desde el fondo hasta el frente, así que la primera sombra se encuentra encima de sombras posteriores. Cuando el `border-radius` es 0, como por defecto, las esquinas de la sombra serán, bien, esquinas. De haberse definido un `border-radius` de cualquier otro valor, las esquinas habrían sido redondeadas.
+
+Se ha añadido un margen del tamaño de la sombra más ancha para asegurarse de que la sombra no se superponga a los elementos adyacentes o vaya más allá del borde de la caja de contención. Una sombra de caja no afeta a las dimensiones del [modelo de caja](/es/docs/Web/CSS/CSS_Box_Model).
+
+## Especificaciones
+
+| Especificación | Estado | Comentario |
+| -------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}} | {{Spec2('CSS3 Backgrounds')}} | Definición inicial |
+
+cssinfo}}
+
+## Compatibilidad de los navegadores
+
+{{Compat("css.properties.box-shadow")}}
+
+## Ver también
+
+- El tipo de dato {{cssxref("<color>")}}
+- Otras propiedades relacionadas al color: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, y {{cssxref("column-rule-color")}}
+- {{cssxref("text-shadow")}}
+- [Aplicando color a los elementos HTML utilizando CSS](/es/docs/Web/HTML/Applying_color)
diff --git a/files/es/web/css/box-sizing/index.html b/files/es/web/css/box-sizing/index.html
deleted file mode 100644
index 64153dd00c45a0..00000000000000
--- a/files/es/web/css/box-sizing/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: box-sizing
-slug: Web/CSS/box-sizing
-tags:
- - CSS
- - Layout
- - Propiedades CSS
- - Web
-translation_of: Web/CSS/box-sizing
----
-{{CSSRef}}
-
-La propiedad CSS box-sizing
como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.
-
-{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
-
-
-
-Por defecto en el modelo de caja de CSS , el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.
-
-La propiedad box-sizing
puede ser usada para ajustar el siguiente comportamiento:
-
-
- content-box
es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
- border-box
le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.
-
-
-Sintaxis
-
-La propiedad box-sizing
es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.
-
-Valores
-
-
- content-box
- Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, .box {width: 350px; border: 10px solid black;}
despliega una caja con un ancho de 370 pixeles.
- Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)
- border-box
- Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, .box {width: 350px; border: 10px solid black;}
despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el border-box
para hacer que el elemento desaparezca.
- Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.
-
-
-
-
-{{csssyntax}}
-
-Ejemplo
-
-Este ejemplo muesta cómo diferentes valores de tamaño de la caja (box-sizing
) alteran el tamaño desplegado de dos elementos idénticos.
-
-HTML
-
-<div class="content-box">Contenido de la caja</div>
-<br>
-<div class="border-box">Borde de la caja</div>
-
-CSS
-
-div {
- width: 160px;
- height: 80px;
- padding: 20px;
- border: 8px solid red;
- background: yellow;
-}
-
-.content-box {
- box-sizing: content-box;
- /* Ancho total: 160px + (2 * 20px) + (2 * 8px) = 216px
- Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
- Ancho de la caja de contenido: 160px
- Altura de la caja de contenido: 80px */
-}
-
-.border-box {
- box-sizing: border-box;
- /* Ancho total: 160px
- Altura total: 80px
- Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
- Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
-}
-
-
-Resultado
-
-{{EmbedLiveSample('Ejemplo', 'auto', 300)}}
-
-Especificaciones
-
-
-
-
- Especificación
- Estatus
- Comentario
-
-
-
-
- {{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}
- {{Spec2('CSS3 Basic UI')}}
- Definición inicial
-
-
-
-
-{{cssinfo}}
-
-Compatibilidad del navegador
-
-
-
-{{Compat("css.properties.box-sizing")}}
-
-Ver también
-
-
diff --git a/files/es/web/css/box-sizing/index.md b/files/es/web/css/box-sizing/index.md
new file mode 100644
index 00000000000000..e237f277a0f32b
--- /dev/null
+++ b/files/es/web/css/box-sizing/index.md
@@ -0,0 +1,104 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+ - CSS
+ - Layout
+ - Propiedades CSS
+ - Web
+translation_of: Web/CSS/box-sizing
+---
+{{CSSRef}}
+
+La propiedad CSS **`box-sizing`** como el {{glossary("user agent")}} debe calcular el ancho y alto total de un elemento.
+
+{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+
+Por defecto en el [modelo de caja de CSS](/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model), el ancho y alto asignado a un elemento es aplicado solo al contenido de la caja del elemento. Si el elemento tiene algun borde (border) o relleno (padding), este es entonces añadido al ancho y alto a alcanzar el tamaño de la caja que es desplegada en pantalla. Esto significa que cuando se definen el ancho y alto, se tiene que ajustar el valor definido para permitir cualquier borde o relleno que se pueda añadir.
+
+La propiedad `box-sizing` puede ser usada para ajustar el siguiente comportamiento:
+
+- `content-box` es el comportamiento CSS por defecto para el tamaño de la caja (box-sizing). Si se define el ancho de un elemento en 100 pixeles, la caja del contenido del elemento tendrá 100 pixeles de ancho, y el ancho de cualquier borde o relleno ser añadirá al ancho final desplegado.
+- `border-box` le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.
+
+## Sintaxis
+
+La propiedad `box-sizing` es especificada como una sola palabra clave elegida de la lista de valores que aparece abajo.
+
+### Valores
+
+- `content-box`
+
+ - : Este es el valor inicial y por defecto especificado por el estándar CSS. Las propiedades {{Cssxref("width")}} and {{Cssxref("height")}} no incluyen el borde, relleno o margen. Por ejemplo, `.box {width: 350px; border: 10px solid black;}` despliega una caja con un ancho de 370 pixeles.
+
+ Aquí, las dimensiones de un elemento son calculados como: ancho = ancho del contenido, altura = altura del contenido. (Los bordes y rellenos no son incluídos en el cálculo.)
+
+- `border-box`
+
+ - : Las propiedad de {{Cssxref("width")}} y {{Cssxref("height")}} incluyen el contenido, relleno y borde pero no incluyen el margén. Tenga en cuenta que el relleno y borde estarán dentro de la caja. Por ejemplo, `.box {width: 350px; border: 10px solid black;}` despliega una caja con un ancho de 350 pixeles. La caja de contenidos no puede ser negativo y tiene un valor mínimo de 0, haciendo imposible usar el `border-box` para hacer que el elemento desaparezca.
+
+ Las dimensiones del elemeno se calculan como: ancho = borde + relleno + ancho del contenido, y altura = borde + relleno + altura del contenido.
+
+### Sintaxis formal
+
+{{csssyntax}}
+
+## Ejemplo
+
+Este ejemplo muesta cómo diferentes valores de tamaño de la caja (`box-sizing`) alteran el tamaño desplegado de dos elementos idénticos.
+
+### HTML
+
+```html
+Contenido de la caja
+
+Borde de la caja
+```
+
+### CSS
+
+```css
+div {
+ width: 160px;
+ height: 80px;
+ padding: 20px;
+ border: 8px solid red;
+ background: yellow;
+}
+
+.content-box {
+ box-sizing: content-box;
+ /* Ancho total: 160px + (2 * 20px) + (2 * 8px) = 216px
+ Altura total: 80px + (2 * 20px) + (2 * 8px) = 136px
+ Ancho de la caja de contenido: 160px
+ Altura de la caja de contenido: 80px */
+}
+
+.border-box {
+ box-sizing: border-box;
+ /* Ancho total: 160px
+ Altura total: 80px
+ Ancho de la caja de contenido: 160px - (2 * 20px) - (2 * 8px) = 104px
+ Altura de la caja de contenido: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+```
+
+### Resultado
+
+{{EmbedLiveSample('Ejemplo', 'auto', 300)}}
+
+## Especificaciones
+
+| Especificación | Estatus | Comentario |
+| ---------------------------------------------------------------------------- | ------------------------------------ | ------------------ |
+| {{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}} | {{Spec2('CSS3 Basic UI')}} | Definición inicial |
+
+{{cssinfo}}
+
+## Compatibilidad del navegador
+
+{{Compat("css.properties.box-sizing")}}
+
+## Ver también
+
+- [Modelo de caja de CSS](/es/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model)