border-style

  • Revision slug: CSS/border-style
  • Revision title: border-style
  • Revision id: 20747
  • Created:
  • Creator: Backinblakk
  • Is current revision? No
  • Comment /* Browser compatibility */ -- revert back to previous, accidental edit

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.

  • Initial value: none or as individual Properties.
  • Applies to: all elements
  • Inherited: no
  • Percentages: N/A
  • Media: Visual
  • Computed value: 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

Mozilla extensions

The following Mozilla Extensions give the border corners a rounded look on Gecko based browsers. These are currently incompatible with some of the standard border styles. See the individual properties for more information.

  • {{template.Cssxref("-moz-border-radius")}}
  • {{template.Cssxref("-moz-border-radius-bottomleft")}}
  • {{template.Cssxref("-moz-border-radius-bottomright")}}
  • {{template.Cssxref("-moz-border-radius-topleft")}}
  • {{template.Cssxref("-moz-border-radius-topright")}}

See also

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

{{ wiki.languages( { "fr": "fr/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> Initial value: none or as individual Properties.
</li><li> Applies to: all elements
</li><li> Inherited: no
</li><li> Percentages: N/A
</li><li> Media: <a href="en/CSS/Media/Visual">Visual</a>
</li><li> Computed value: 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/2003/WD-css3-ui-20030703/#additional">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="Mozilla_extensions"> Mozilla extensions </h3>
<p>The following Mozilla Extensions give the border corners a rounded look on Gecko based browsers. These are currently incompatible with some of the standard border styles. See the individual properties for more information.
</p>
<ul><li>{{template.Cssxref("-moz-border-radius")}}
</li><li>{{template.Cssxref("-moz-border-radius-bottomleft")}}
</li><li>{{template.Cssxref("-moz-border-radius-bottomright")}}
</li><li>{{template.Cssxref("-moz-border-radius-topleft")}}
</li><li>{{template.Cssxref("-moz-border-radius-topright")}}
</li></ul>
<h3 name="See_also"> See also </h3>
<p>{{template.Cssxref("border")}}, {{template.Cssxref("border-width")}}, {{template.Cssxref("border-color")}}
</p>{{ wiki.languages( { "fr": "fr/CSS/border-style" } ) }}
Revert to this revision