border-style

  • Revision slug: CSS/border-style
  • Revision title: border-style
  • Revision id: 20756
  • Created:
  • Creator: Rowno
  • Is current revision? No
  • Comment Upgraded to new compatibility table; 63 words added, 12 words removed

Revision Content

{{ CSSRef() }}

Summary

The border-style CSS 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
  • 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 fourth sets the left.

Examples

{{ CSSRefExampleLink("border") }}

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

Notes

The default value of border-style is 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.

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.0") }} 1.0 4.0 3.5 1.0
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatGeckoMobile("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Specifications

See also

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

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

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The<code> border-style </code>CSS 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>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as individual properties</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">border-style: [ &lt;border-style&gt; ]{1,4} | <em>inherit</em>
</pre>
<h3>Values</h3>
<dl> <dt>&lt;border-style&gt; </dt> <dd>The Border Style can be any of the following values.</dd>
</dl>
<ul> <li><strong>none</strong> : No border, sets width to 0. This is the default value.</li> <li><strong>hidden</strong> : Same as 'none', except in terms of border conflict resolution for table elements.</li> <li><strong>dashed</strong> : Series of short dashes or line segments.</li> <li><strong>dotted</strong> : Series of dots.</li> <li><strong>double</strong> : Two straight lines that add up to the pixel amount defined as <code>border-width</code>.</li> <li><strong>groove</strong> : Carved effect.</li> <li><strong>inset</strong> : Makes the box appear embedded.</li> <li><strong>outset</strong> : Opposite of 'inset'. Makes the box appear 3D (embossed).</li> <li><strong>ridge</strong> : Opposite of 'groove'. The border appears 3D (coming out).</li> <li><strong>solid</strong> : 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 fourth sets the left.</p>
<h3>Examples</h3>
<p>{{ CSSRefExampleLink("border") }}</p>
<pre>element { 
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
</pre>
<h3>Notes</h3>
<p>The default value of<code> border-style </code>is<code> none</code>. 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>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>1.0</td> <td>4.0</td> <td>3.5</td> <td>1.0</td> </tr> </tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox Mobile (Gecko)</th> <th>Android</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoMobile("1.9.2") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody>
</table>
</div><h3>Specifications</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/CSS21/box.html#border-style-properties">CSS 2.1 Box model #border-style</a></li>
</ul>
<h3>See also</h3>
<p>{{ Cssxref("border") }}, {{ Cssxref("border-width") }}, {{ Cssxref("border-color") }}, {{ Cssxref("border-radius") }}</p>
<p>{{ languages( { "de": "de/CSS/border-style", "fr": "fr/CSS/border-style", "pl": "pl/CSS/border-style", "es": "es/CSS/border-style" } ) }}</p>
Revert to this revision