border-style

  • Revision slug: CSS/border-style
  • Revision title: border-style
  • Revision id: 20751
  • Created:
  • Creator: BijuGC
  • Is current revision? No
  • Comment /* Summary */

Revision Content

{{template.CSSRef()}}

Summary

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

  • {{template.Xref_cssinitial()}}: {{template.Cssxref("none")}} or as individual Properties.
  • Applies to: all elements
  • {{template.Xref_cssinherited()}}: no
  • Percentages: N/A
  • Media: {{template.Xref_cssvisual()}}
  • {{template.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

{{template.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 {{template.Cssxref("border-width")}} and the {{template.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

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

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

Revision Source

<p> 
{{template.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> {{template.Xref_cssinitial()}}: {{template.Cssxref("none")}} or as individual Properties.
</li><li> Applies to: all elements
</li><li> {{template.Xref_cssinherited()}}: no
</li><li> Percentages: N/A
</li><li> Media: {{template.Xref_cssvisual()}}
</li><li> {{template.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>{{template.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 {{template.Cssxref("border-width")}} and the {{template.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>{{template.Cssxref("border")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("border-color")}}, {{template.Cssxref("-moz-border-radius")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/border-style", "pl": "pl/CSS/border-style" } ) }}
Revert to this revision