Difference between revisions of "CSS GUIDE BORDER STYLE"

From CDOT Wiki
Jump to: navigation, search
(Legal Values)
(See Also)
 
(23 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
== Summary ==
 
== Summary ==
 
The border-style property sets the style of an element's border. This property must be specified for the border to be visible.  Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.
 
The border-style property sets the style of an element's border. This property must be specified for the border to be visible.  Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.
 +
 +
'''Inherited: No'''
  
 
== Syntax ==
 
== Syntax ==
table {border-style: dotted}
+
border-style: value optionalvalue2 optionalvalue3 optionalvalue4
all four borders will be dotted
 
 
 
table {border-style: dotted dashed}
 
top and bottom border will be dotted, left an right border will be dashed
 
 
 
table {border-style: dotted dashed solid}
 
top border will be dotted, left and right border will be dashed, bottom border will be solid
 
 
 
table {border-style: dotted dashed solid double}
 
top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double
 
  
 
== Legal Values ==
 
== Legal Values ==
  
 
<table border = "1" width="350">
 
<table border = "1" width="350">
 +
 
<tr>
 
<tr>
 
<th>Value</th>
 
<th>Value</th>
Line 44: Line 37:
 
<td>Defines a dashed border</td>
 
<td>Defines a dashed border</td>
 
</tr>
 
</tr>
 +
 
<tr>
 
<tr>
 
<td>solid</td>
 
<td>solid</td>
 
<td>Defines a solid border</td>
 
<td>Defines a solid border</td>
 
</tr>
 
</tr>
 +
 
<tr>
 
<tr>
 
<td>double</td>
 
<td>double</td>
 
<td>Defines two borders. The width of the two borders are the same as the border-width value</td>
 
<td>Defines two borders. The width of the two borders are the same as the border-width value</td>
 
</tr>
 
</tr>
 +
 +
<tr>
 +
<td>groove</td>
 +
<td>Defines a 3D grooved border. The effect depends on the border-color value</td>
 +
</tr>
 +
 
<tr>
 
<tr>
<td>solid</td>
+
<td>ridge</td>
<td>[[user:dmmanley| Dave]]</td>
+
<td>Defines a 3D ridged border. The effect depends on the border-color value</td>
 +
</tr>
 +
 
 +
 
 +
<tr>
 +
<td>inset</td>
 +
<td>Defines a 3D inset border. The effect depends on the border-color value</td>
 +
</tr>
 +
 
 +
<tr>
 +
<td>outset</td>
 +
<td>Defines a 3D outset border. The effect depends on the border-color value</td>
 
</tr>
 
</tr>
 +
 
</table>
 
</table>
  
Line 61: Line 74:
  
 
== Usage Examples ==
 
== Usage Examples ==
 +
 +
<pre>p{border-style: dotted}</pre>
 +
All four borders will be dotted.
 +
<pre>p{border-style: dotted dashed}</pre>
 +
Top and bottom border will be dotted, left an right border will be dashed.
 +
<pre>p{border-style: dotted dashed solid}</pre>
 +
Top border will be dotted, left and right border will be dashed, bottom border will be solid.
 +
<pre>p{border-style: dotted dashed solid double}</pre>
 +
Top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double.
  
 
== Notes ==
 
== Notes ==
Line 66: Line 88:
  
 
== Specification Conformance  ==
 
== Specification Conformance  ==
 +
CSS1 Conformance: Browsers are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.
  
 
== Browser Compatibility ==
 
== Browser Compatibility ==
 +
 +
Browser Compatibility: IE 4+ / NN 4+
  
 
== See Also ==
 
== See Also ==
 +
 +
[http://zenit.senecac.on.ca/wiki/index.php?title=CSS_GUIDE_BORDER_STYLE&action=edit&section=9  Border Style Cascade Style Sheets Properties]
 +
<br>
 +
[http://www.w3schools.com/css/pr_border-style.asp CSS Border-style property]
 +
<br>
 +
[http://www.zvon.org/xxl/css1Reference/Output/property_border-style.html Borderstyle CSS1 Reference]

Latest revision as of 13:59, 11 December 2006

This document is a work in progress and is subject to change.

Summary

The border-style property sets the style of an element's border. This property must be specified for the border to be visible. Between one and four keywords are specified. If four values are given, they apply to top, right, bottom, and left border style, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.

Inherited: No

Syntax

border-style: value optionalvalue2 optionalvalue3 optionalvalue4

Legal Values

Value Description
none Defines no border
hidden The same as "none", except in border conflict resolution for table elements
dotted Defines a dotted border
dashed Defines a dashed border
solid Defines a solid border
double Defines two borders. The width of the two borders are the same as the border-width value
groove Defines a 3D grooved border. The effect depends on the border-color value
ridge Defines a 3D ridged border. The effect depends on the border-color value
inset Defines a 3D inset border. The effect depends on the border-color value
outset Defines a 3D outset border. The effect depends on the border-color value

Mozilla Recommended Values

Usage Examples

p{border-style: dotted}

All four borders will be dotted.

p{border-style: dotted dashed}

Top and bottom border will be dotted, left an right border will be dashed.

p{border-style: dotted dashed solid}

Top border will be dotted, left and right border will be dashed, bottom border will be solid.

p{border-style: dotted dashed solid double}

Top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double.

Notes

Specification Conformance

CSS1 Conformance: Browsers are allowed to treat values of dotted, dashed, groove, ridge, inset, outset and double as the value solid.

Browser Compatibility

Browser Compatibility: IE 4+ / NN 4+

See Also

Border Style Cascade Style Sheets Properties
CSS Border-style property
Borderstyle CSS1 Reference