border-style

  • Revision slug: CSS/border-style
  • Revision title: border-style
  • Revision id: 20752
  • Created:
  • Creator: Nathymig
  • Is current revision? No
  • Comment interwiki :es

Revision Content

{{ CSSRef() }}

Summary

The border-style property is a shorthand property for setting the line style for all four sides of the elements border.

  • {{ Xref_cssinitial() }}: {{ Cssxref("none") }} or as individual Properties.
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Percentages: N/A
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as individual properties

Syntax

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

Values

<border-style> 
The Border Style can be any of the following values.
  • none : No border, sets width to 0. This is the default value.
  • hidden : Same as 'none', except in terms of border conflict resolution for table elements.
  • dashed : Series of short dashes or line segments.
  • dotted : Series of dots.
  • double : Two straight lines that add up to the pixel amount defined as border-width.
  • groove : Carved effect.
  • inset : Makes the box appear embedded.
  • outset : Opposite of 'inset'. Makes the box appear 3D (embossed).
  • ridge : Opposite of 'groove'. The border appears 3D (coming out).
  • solid : Single, straight, solid line.

Up to four values can be given;
The first value sets all four borders.
The second sets the left and right.
The third sets the bottom.
The forth sets the Left.

Examples

{{ CSSRefExampleLink("border") }}

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

Notes

By Default the border-style is set to none. This meant that if you change the {{ Cssxref("border-width") }} and the {{ Cssxref("border-color") }} you will not see the border unless you change this property to something other than none or hidden.

Specifications

Browser compatibility

Browser Lowest Version
Internet Explorer 4
Firefox 1
Netscape 4
Opera 3.5

See also

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

{{ languages( { "fr": "fr/CSS/border-style", "pl": "pl/CSS/border-style", "es": "es/CSS/border-style" } ) }}

Revision Source

<p> {{ CSSRef() }}
</p>
<h3 name="Summary"> Summary </h3>
<p>The <code>border-style</code> property is a shorthand property for setting the line style for all four sides of the elements border.
</p>
<ul><li> {{ Xref_cssinitial() }}: {{ Cssxref("none") }} or as individual Properties.
</li><li> Applies to: all elements
</li><li> {{ Xref_cssinherited() }}: no
</li><li> Percentages: N/A
</li><li> Media: {{ Xref_cssvisual() }}
</li><li> {{ Xref_csscomputed() }}: as individual properties
</li></ul>
<h3 name="Syntax"> Syntax </h3>
<pre class="eval">border-style: [ &lt;border-style&gt; ]{1,4} | <i>inherit</i>
</pre>
<h3 name="Values"> Values </h3>
<dl><dt> &lt;border-style&gt; </dt><dd> The Border Style can be any of the following values.
</dd></dl>
<ul><li> <b>none</b> : No border, sets width to 0. This is the default value.
</li><li> <b>hidden</b> : Same as 'none', except in terms of border conflict resolution for table elements.
</li><li> <b>dashed</b> : Series of short dashes or line segments.
</li><li> <b>dotted</b> : Series of dots.
</li><li> <b>double</b> : Two straight lines that add up to the pixel amount defined as <code>border-width</code>.
</li><li> <b>groove</b> : Carved effect.
</li><li> <b>inset</b> : Makes the box appear embedded.
</li><li> <b>outset</b> : Opposite of 'inset'. Makes the box appear 3D (embossed).
</li><li> <b>ridge</b> : Opposite of 'groove'. The border appears 3D (coming out).
</li><li> <b>solid</b> : Single, straight, solid line.
</li></ul>
<p>Up to four values can be given;<br>
The first value sets all four borders.<br>
The second sets the left and right.<br>
The third sets the bottom.<br>
The forth sets the Left.
</p>
<h3 name="Examples"> Examples </h3>
<p>{{ CSSRefExampleLink("border") }}
</p>
<pre>element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
</pre>
<h3 name="Notes"> Notes </h3>
<p>By Default the <code>border-style</code> is set to none. This meant that if you change the {{ Cssxref("border-width") }} and the {{ Cssxref("border-color") }} you will not see the border unless you change this property to something other than <code>none</code> or <code>hidden</code>.
</p>
<h3 name="Specifications"> Specifications </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="Browser_compatibility"> Browser compatibility </h3>
<table class="standard-table"> <tbody><tr> <th>Browser</th> <th>Lowest Version</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="See_also"> See also </h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("-moz-border-radius") }}
</p>{{ languages( { "fr": "fr/CSS/border-style", "pl": "pl/CSS/border-style", "es": "es/CSS/border-style" } ) }}
Revert to this revision