initial commit

1 files changed, 242 insertions, 0 deletions

diff --git a/files/es/web/css/border-style/index.html b/files/es/web/css/border-style/index.html
new file mode 100644
index 0000000000..616f336ead
--- /dev/null
+++ b/files/es/web/css/border-style/index.html
@@ -0,0 +1,242 @@
+---
+title: border-style
+slug: Web/CSS/border-style
+tags:
+  - Bordes CSS
+  - CSS
+  - Propiedad CSS
+  - Referencia
+translation_of: Web/CSS/border-style
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">La propiedad <strong><code>border-style</code></strong> <a href="/en/CSS" title="CSS">CSS</a> es una <a href="/en-US/docs/Web/CSS/Shorthand_properties">shorthand property</a> (Propiedad abreviada) que establece el estilo de línea para los cuatro lados del borde de un elemento.</span></p>
+
+<div>{{EmbedInteractiveExample("pages/css/border-style.html")}}</div>
+
+
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css no-line-numbers notranslate">/* 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;
+</pre>
+
+<p>La propiedad <code>border-style</code> se puede especificar usando uno, dos, tres o cuatro valores.</p>
+
+<ul>
+ <li>Cuando se especifica <strong>un</strong> valor, se aplica el mismo estilo a los <strong>cuatro lados</strong>.</li>
+ <li>Cuando se especifican <strong>dos </strong>valores, el primer estilo se aplica a la parte <strong>superior e inferior</strong>, el segundo a la <strong>izquierda y a la derecha</strong></li>
+ <li>Cuando se especifican <strong>tres </strong>valores, el primer estilo se aplica a la <strong>parte superior</strong>, el segundo a la <strong>izquierda y derecha</strong>, el tercero a la <strong>parte inferior</strong>.</li>
+ <li>Cuando se especifican <strong>cuatro </strong>valores, los estilos se aplican a la parte <strong>superior</strong>, <strong>derecha</strong>, <strong>inferior </strong>e <strong>izquierda </strong>en ese orden (en el sentido de las agujas del reloj).</li>
+</ul>
+
+<p>Cada valor es una palabra clave elegida de la siguiente lista.</p>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;br-style&gt;</code></dt>
+ <dd>Describe el estilo del borde. Puede tener los siguientes valores:
+ <table class="standard-table">
+  <tbody>
+   <tr>
+    <td style="vertical-align: middle;"><code>none</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-top-style: none; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Like the <code>hidden</code> keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be <code>0</code>, even if the specified value is something else. In the case of table cell and border collapsing, the <code>none</code> value has the <em>lowest</em> priority: if any other conflicting border is set, it will be displayed.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>hidden</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: hidden; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Like the <code>none</code> keyword, displays no border. Unless a {{cssxref("background-image")}} is set, the calculated value of {{ cssxref("border-top-width") }} will be <code>0</code>, even if the specified value is something else. In the case of table cell and border collapsing, the <code>hidden</code> value has the <em>highest</em> priority: if any other conflicting border is set, it won't be displayed.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dotted</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dotted; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">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") }}.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>dashed</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: dashed; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">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.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>solid</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: solid; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a single, straight, solid line.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>double</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: double; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays two straight lines that add up to the pixel size defined by {{ cssxref("border-width") }} or {{ cssxref("border-top-width") }}.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>groove</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: groove; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a border with a carved appearance. It is the opposite of <code>ridge</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>ridge</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: ridge; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a border with an extruded appearance. It is the opposite of <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>inset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: inset; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">Displays a border that makes the element appear embedded. It is the opposite of <code>outset</code>. When applied to a table cell with {{ cssxref("border-collapse") }} set to <code>collapsed</code>, this value behaves like <code>groove</code>.</td>
+   </tr>
+   <tr>
+    <td style="vertical-align: middle;"><code>outset</code></td>
+    <td style="vertical-align: middle;">
+     <div style="margin: 0.5em; width: 3em; height: 3em; border-width: 3px; border-top-style: outset; background-color: palegreen;"></div>
+    </td>
+    <td style="vertical-align: middle;">
+     <p>Displays a border that makes the element appear embossed. It is the opposite of <code>inset</code>. When applied to a table cell with {{ cssxref("border-collapse") }} set to <code>collapsed</code>, this value behaves like <code>ridge</code>.</p>
+    </td>
+   </tr>
+  </tbody>
+ </table>
+ </dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<h3 id="Table_with_all_property_values" name="Table_with_all_property_values">Tabla con todos los valores de propiedad</h3>
+
+<p>A continuación, se muestra un ejemplo de todos los valores de propiedad.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;table&gt;
+  &lt;tr&gt;
+    &lt;td class="b1"&gt;none&lt;/td&gt;
+    &lt;td class="b2"&gt;hidden&lt;/td&gt;
+    &lt;td class="b3"&gt;dotted&lt;/td&gt;
+    &lt;td class="b4"&gt;dashed&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b5"&gt;solid&lt;/td&gt;
+    &lt;td class="b6"&gt;double&lt;/td&gt;
+    &lt;td class="b7"&gt;groove&lt;/td&gt;
+    &lt;td class="b8"&gt;ridge&lt;/td&gt;
+  &lt;/tr&gt;
+  &lt;tr&gt;
+    &lt;td class="b9"&gt;inset&lt;/td&gt;
+    &lt;td class="b10"&gt;outset&lt;/td&gt;
+  &lt;/tr&gt;
+&lt;/table&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css notranslate">/* 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;}</pre>
+
+<h4 id="Output">Output</h4>
+
+<p>{{ EmbedLiveSample('Table_with_all_property_values', 300, 200) }}</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificacion </th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Backgrounds', '#border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>Adds <code>hidden</code> keyword value.</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#border-style', 'border-style') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Compatibilidad_del_navegador">Compatibilidad del navegador</h2>
+
+
+
+<p>{{Compat("css.properties.border-style")}}</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>The border-related shorthand CSS properties: {{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</li>
+</ul>