border-style

  • Enlace amigable (slug) de la revisión: CSS/border-style
  • Título de la revisión: border-style
  • Id de la revisión: 89784
  • Creada:
  • Creador: Nathymig
  • ¿Es la revisión actual? No
  • Comentario Creo y traduzco

Contenido de la revisión

{{template.AnteriorSiguiente("CSS:border-color", "CSS:border-width")}}

Resumen

La propiedad estilo de borde (border-style) es un corte camino para definir de un golpe el estilo de línea de los cuatro bordes de un elemento.

  • {{template.Cssxref("initial", "Valor inicial")}}: {{template.Cssxref("none", "ninguna")}} o según las propiedades individuales.
  • Se aplica a: todos los elementos
  • {{template.Cssxref("inheritance", "Herencia")}}: no
  • Percentages: N/A
  • Media: {{template.Cssxref("visual")}}
  • {{template.Cssxref("computed value", "Valor calculada")}}: como las propiedades individuales

Sintaxis

border-style: [ <border-style> ]{1,4} | inherit

Valores

<border-style> 
el estilo del borde puede tomar cualquier valor de las siguientes:
  • none : sin borde, el ancho es definido como 0. Es el valor por defecto.
  • hidden : igual que 'none', excepto en el caso de conflictos de bordes por ejemplo en elementos de tabla.
  • dashed : serie de guiones (-----).
  • dotted : series de puntos (.....).
  • double : dos líneas rectas continuas separadas de un número de píxel definido como border-width.
  • groove : efecto de hundimiento del borde.
  • inset : efecto de hundimiento de una caja.
  • outset : efecto inverso a 'inset', la caja parece salir, como en 3D.
  • ridge : efecto inverso a 'groove', el borde parece salir, como en 3D.
  • solid : línea única, recta, sólida.

Cantidad de valores para definir el/los borde/s;
un valor: los cuatro bordes.
dos valores: 1º: arriba y abajo, 2º: izquierda y derecha.
tres valores: 1º: arriba, 2º: izquierda y derecha, 3º: abajo.
cuatro valores: de arriba hasta la derecha en sentido del reloj. 1º arriba, 2º izquierda, 3º abajo, 4º derecha.

Ejemplos

{{template.CSSRefExampleLink("border")}}

element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

Notas

Por defecto el estilo de borde (border-style) es definido como ninguno ('none'). Ésto significa que aún modificando el ancho ({{template.Cssxref("border-width")}}) y el color ({{template.Cssxref("border-color")}}) del borde no se verá ningún borde hasta que también se modifique el estilo de borde (border-style) con un valor diferente a none o hidden.

Especificaciones

Compatibilidad

Navegador Versión mínima
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

Ver también

{{template.Cssxref("border")}}, {{template.Cssxref("border-color")}}, {{template.Cssxref("border-style")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("-moz-border-radius")}}


Categorías

Interwiki Languages
{{ wiki.languages( { "fr": "fr/CSS/border-style", "pl": "pl/CSS/border-style", "en": "en/CSS/border-style" } ) }}

Fuente de la revisión

<p> 
{{template.AnteriorSiguiente("CSS:border-color", "CSS:border-width")}}
</p>
<h3 name="Resumen"> Resumen </h3>
<p>La propiedad estilo de borde (<code>border-style</code>) es un corte camino para definir de un golpe el estilo de línea de los cuatro bordes de un elemento.
</p>
<ul><li> {{template.Cssxref("initial", "Valor inicial")}}: {{template.Cssxref("none", "ninguna")}} o según las propiedades individuales.
</li><li> Se aplica a: todos los elementos
</li><li> {{template.Cssxref("inheritance", "Herencia")}}: no
</li><li> Percentages: N/A
</li><li> Media: {{template.Cssxref("visual")}}
</li><li> {{template.Cssxref("computed value", "Valor calculada")}}: como las propiedades individuales
</li></ul>
<h3 name="Sintaxis"> Sintaxis </h3>
<pre class="eval">border-style: [ &lt;border-style&gt; ]{1,4} | <i>inherit</i>
</pre>
<h3 name="Valores"> Valores </h3>
<dl><dt> &lt;border-style&gt; </dt><dd> el estilo del borde puede tomar cualquier valor de las siguientes:
</dd></dl>
<ul><li> <b>none</b> : sin borde, el ancho es definido como 0. Es el valor por defecto.
</li><li> <b>hidden</b> : igual que 'none', excepto en el caso de conflictos de bordes por ejemplo en elementos de tabla.
</li><li> <b>dashed</b> : serie de guiones (-----).
</li><li> <b>dotted</b> : series de puntos (.....).
</li><li> <b>double</b> : dos líneas rectas continuas separadas de un número de píxel definido como <code>border-width</code>.
</li><li> <b>groove</b> : efecto de hundimiento del borde.
</li><li> <b>inset</b> : efecto de hundimiento de una caja.
</li><li> <b>outset</b> : efecto inverso a 'inset', la caja parece salir, como en 3D.
</li><li> <b>ridge</b> : efecto inverso a 'groove', el borde parece salir, como en 3D.
</li><li> <b>solid</b> : línea única, recta, sólida.
</li></ul>
<p>Cantidad de valores para definir el/los borde/s;<br>
un valor: los <b>cuatro</b> bordes.<br>
dos valores: 1º: arriba y abajo, 2º: izquierda y derecha.<br>
tres valores: 1º: arriba, 2º: izquierda y derecha, 3º: abajo.<br>
cuatro valores: de arriba hasta la derecha en sentido del reloj. 1º arriba, 2º izquierda, 3º abajo, 4º derecha.
</p>
<h3 name="Ejemplos"> Ejemplos </h3>
<p>{{template.CSSRefExampleLink("border")}}
</p>
<pre>element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
</pre>
<h3 name="Notas"> Notas </h3>
<p>Por defecto el estilo de borde (<code>border-style</code>) es definido como ninguno ('none'). Ésto significa que aún modificando el ancho ({{template.Cssxref("border-width")}}) y el color  ({{template.Cssxref("border-color")}}) del borde no se verá ningún  borde hasta que también se modifique el estilo de borde (<code>border-style</code>) con un valor diferente a  <code>none</code> o <code>hidden</code>.
</p>
<h3 name="Especificaciones"> Especificaciones </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/CSS1#border-style">CSS 1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties">CSS 2.1</a>
</li><li> <a class="external" href="http://www.w3.org/TR/css3-background/#border-style">CSS 3</a>
</li></ul>
<h3 name="Compatibilidad"> Compatibilidad </h3>
<table class="standard-table">
  <tbody><tr>
    <th>Navegador</th>
    <th>Versión mínima</th>
  </tr>
  <tr>
    <td>Internet Explorer</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Firefox</td>
    <td>1</td>
  </tr>
  <tr>
    <td>Netscape</td>
    <td>4</td>
  </tr>
  <tr>
    <td>Opera</td>
    <td>3.5</td>
  </tr>
</tbody></table>
<h3 name="Ver_tambi.C3.A9n"> Ver también </h3>
<p>{{template.Cssxref("border")}}, {{template.Cssxref("border-color")}}, {{template.Cssxref("border-style")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("-moz-border-radius")}}
</p><p><br>
</p>
<div class="noinclude">
<p><span class="comment">Categorías</span>
</p>
<span class="comment">Interwiki Languages</span></div>
{{ wiki.languages( { "fr": "fr/CSS/border-style", "pl": "pl/CSS/border-style", "en": "en/CSS/border-style" } ) }}
Revertir a esta revisión