Open main menu

CDOT Wiki β

Changes

CSS GUIDE BORDER STYLE

5,684 bytes removed, 14:59, 11 December 2006
→‎See Also
== 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 ==
table {border-style: dotted}all four borders will be dottedvalue optionalvalue2 optionalvalue3 optionalvalue4
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 ==
== CSS Properties ==
<table border = "1" width="350">
<tr>
<th>#</th>
<th>CSS Property</th>
<th>Assignee</th>
</tr>
 
<tr>
<td>1</td>
<td>[[CSS_GUIDE_COLOR | color]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>2</td>
<td>[[CSS_GUIDE_FONT_SIZE | font-size]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>3</td>
<td>[[CSS_GUIDE_FONT_FAMILY | font-family]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>4</td>
<td>[[CSS_GUIDE_TEXT_DECORATION | text-decoration]]</td>
<td>[[user: Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>5</td>
<td>[[CSS_GUIDE_FONT_WEIGHT | font-weight]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>6</td>
<td>[[CSS_GUIDE_BACKGROUND_COLOR | background-color]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>7</td>
<td>[[CSS_GUIDE_WIDTH | width]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>8</td>
<td>[[CSS_GUIDE_TEXT_ALIGN | text-align]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>9</td>
<td>[[CSS_GUIDE_MARGIN_TOP | margin-top ]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>10</td>
<td>[[CSS_GUIDE_MARGIN | margin]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>11</td>
<td>[[CSS_GUIDE_MARGIN_BOTTOM | margin-bottom]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>12</td>
<td>[[CSS_GUIDE_BORDER | border]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>13</td>
<td>[[CSS_GUIDE_PADDING | padding]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>14</td>
<td>[[CSS_GUIDE_LINE_HEIGHT | line-height]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>15</td>
<td>[[CSS_GUIDE_HEIGHT | height]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>16</td>
<td>[[CSS_GUIDE_MARGIN_LEFT | margin-left]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>17</td>
<td>[[CSS_GUIDE_FONT-STYLE | font-style]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>18</td>
<td>[[CSS_GUIDE_PADDING_LEFT | padding-left]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>19</td>
<td>[[CSS_GUIDE_PADDING_TOP | padding-top]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>20</td>
<td>[[CSS_GUIDE_POSITION | position]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>21</td>
<td>[[CSS_GUIDE_BORDER_BOTTOM | border-bottom]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>22</td>
<td>[[CSS_GUIDE_BACKGROUND_IMAGE | background-image]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>23</td>
<td>[[CSS_GUIDE_BACKGROUND | background]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>24</td>
<td>[[CSS_GUIDE_MARGIN_RIGHT | margin-right]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>25</td>
<td>[[CSS_GUIDE_BORDER_RIGHT | border-right]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>26</td>
<td>[[CSS_GUIDE_PADDING_BOTTOM | padding-bottom]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>27</td>
<td>[[CSS_BORDER_TOP | border-top]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>28</td>
<td>[[CSS_GUIDE_BORDER_LEFT | border-left]]</td>
<td>[[user:Sherman | Sherman]]</td>
</tr>
 
<tr>
<td>29</td>
<td>[[CSS_GUIDE_TOP | top]]</td>
<td>[[user:dmmanley| Dave]]</td>
</tr>
 
<tr>
<td>30</td>
<td>[[CSS_GUIDE_DISPLAY | display]]</td>
<td>[[user:mdsouza | Mark ]]</td>
</tr>
 
<tr>
<td>31</td>
<td>[[CSS_GUIDE_LEFT | left]]</td>
<td>[[user:| ]]</td>
</tr>
 
<tr>
<td>32</td>
<td>[[CSS_GUIDE_PADDING_RIGHT | padding-right]]</td>
<td>[[user:bhearsum|bhearsum]]</td>
</tr>
 
<tr>
<td>33</td>
<td>[[CSS_GUIDE_VERTICAL_ALIGN | vertical-align]]</td>
<td>[[user:| ]]</td>
</tr>
 
<tr>
<td>34</td>
<td>[[CSS_GUIDE_BACKGROUND_REPEAT | background-repeat]]</td>
<td>[[user:| ]]</td>
</tr>
 
<tr>
<td>35</td>
<td>[[CSS_GUIDE_Z_INDEX | z-index]]</td>
<td>[[user:| ]]</td>
</tr>
 
<tr>
<td>36</td>
<td>[[CSS_GUIDE_FLOAT | float]]</td>
<td>[[user:| ]]</td>
</tr>
 
<tr>
<td>37</td>
<td>[[CSS_GUIDE_CURSOR | cursor]]</td>
<td>[[user:| ]]</td>
</tr>
 
<tr>
<td>38</td>
<td>[[CSS_GUIDE_BORDER_STYLE | border-style]]</td>
<td>[[user:cbguy1 | Colin ]]</td>
</tr>
<tr>
<tdth>39Value</tdth><tdth>[[CSS_GUIDE_FONT | font]]Description</td><td>[[user:| ]]</tdth>
</tr>
<tr>
<td>40</td>
<td>[[CSS_GUIDE_BORDER_WIDTH | border-width]]</td>
<td>[[user:| ]]</td>
</tr>
<tr>
<td>41none</td><td>[[CSS_GUIDE_BACKGROUND_POSITION | background-position]]</td><td>[[user:| ]]Defines no border</td>
</tr>
<tr>
<td>42hidden</td><td>[[CSS_GUIDE_LETTER_SPACING | letter-spacing]]</td><td>[[user:| ]]The same as "none", except in border conflict resolution for table elements</td>
</tr>
<tr>
<td>43dotted</td><td>[[CSS_GUIDE_VISIBILITY | visibility]]</td><td>[[user:| ]]Defines a dotted border</td>
</tr>
<tr>
<td>44dashed</td><td>[[CSS_GUIDE_BORDER_COLOR | Defines a dashed border-color]]</td><td>[[user:| ]]</td>
</tr>
<tr>
<td>45solid</td><td>[[CSS_GUIDE_BORDER_COLLAPSE | Defines a solid border-collapse]]</td><td>[[user:| ]]</td>
</tr>
<tr>
<td>46double</td><td>[[CSS_GUIDE_LIST_STYLE_TYPE | listDefines two borders. The width of the two borders are the same as the border-style-type]]</td><td>[[user:| ]]width value</td>
</tr>
<tr>
<td>47groove</td><td>[[CSS_GUIDE_TEXT_TRANSFORM | textDefines a 3D grooved border. The effect depends on the border-transform]]</td><td>[[user:| ]]color value</td>
</tr>
<tr>
<td>48ridge</td><td>[[CSS_GUIDE_CLEAR | clear]]</td><td>[[user:| ]]Defines a 3D ridged border. The effect depends on the border-color value</td>
</tr>
<tr>
<td>49</td>
<td>[[CSS_GUIDE_OVERFLOW | overflow]]</td>
<td>[[user:| ]]</td>
</tr>
<tr>
<td>50inset</td><td>[[CSS_GUIDE_TEXT_INDENT | textDefines a 3D inset border. The effect depends on the border-indent]]</td><td>[[user:| ]]color value</td>
</tr>
<tr>
<td>51outset</td><td>[[CSS_GUIDE_-MOZ-BINDING | -moz-binding]]</td><td>[[user:| ]]</td></tr> <tr><td>52</td><td>[[CSS_GUIDE_-MOZ-BORDER-RADIUS | -moz-border-radius]]</td><td>[[user:| ]]</td></tr> <tr><td>53</td><td>[[CSS_GUIDE_-MOZ-BORDER-RADIUS-TOPLEFT | -moz-Defines a 3D outset border-radius-topleft]]</td><td>[[user:| ]]</td></tr> <tr><td>54</td><td>[[CSS_GUIDE_-MOZ-BORDER-RADIUS-TOPRIGHT | -moz-border-radius-topright]]</td><td>[[user:| ]]</td></tr> <tr><td>55</td><td>[[CSS_GUIDE_-MOZ-BORDER-RADIUS-BOTTOMRIGHT | -moz-border-radius-bottomright]]</td><td>[[user:| ]]</td></tr> <tr><td>56</td><td>[[CSS_GUIDE_-MOZ-BORDER-RADIUS-BOTTOMLEFT | -moz-border-radius-bottomleft]]</td><td>[[user:| ]]</td></tr> <tr><td>57</td><td>[[CSS_GUIDE_-MOZ-BORDER-TOP-COLORS | -moz-border-top-colors]]</td><td>[[user:| ]]</td></tr> <tr><td>58</td><td>[[CSS_GUIDE_-MOZ-BORDER-RIGHT-COLORS | -moz-border-right-colors]]</td><td>[[user:| ]]</td></tr> <tr><td>59</td><td>[[CSS_GUIDE_-MOZ-BORDER-BOTTOM-COLORS | -moz-border-BOTTOM-colors]]</td><td>[[user:| ]]</td></tr> <tr><td>60</td><td>[[CSS_GUIDE_-MOZ-BORDER-LEFT-COLORS | -moz-. The effect depends on the border-left-colors]]</td><td>[[user:| ]]</td></tr> <tr><td>61</td><td>[[CSS_GUIDE_-MOZ-OPACITY | -moz-opacity]]</td><td>[[user:| ]]</td></tr> <tr><td>62</td><td>[[CSS_GUIDE_-MOZ-OUTLINE | -moz-outline]]</td><td>[[user:| ]]</td></tr> <tr><td>63</td><td>[[CSS_GUIDE_-MOZ-OUTLINE-COLOR | -moz-outline-color]]</td><td>[[user:| ]]</td></tr> <tr><td>64</td><td>[[CSS_GUIDE_-MOZ-OUTLINE-STYLE | -moz-outline-style]]</td><td>[[user:| ]]</td></tr> <tr><td>65</td><td>[[CSS_GUIDE_-MOZ-OUTLINE-WIDTH | -moz-outline-width]]</td><td>[[user:| ]]</td></tr> <tr><td>66</td><td>[[CSS_GUIDE_-MOZ-OUTLINE-FOCUS | -moz-outline-focus]]</td><td>[[user:| ]]</td></tr> <tr><td>67</td><td>[[CSS_GUIDE_-MOZ-USER-INPUT | -moz-user-input]]</td><td>[[user:| ]]</td></tr> <tr><td>68</td><td>[[CSS_GUIDE_-MOZ-USER-MODIFY | -moz-user-modify]]</td><td>[[user:| ]]</td></tr> <tr><td>69</td><td>[[CSS_GUIDE_-MOZ-USER-SELECT | -moz-user-select]]</td><td>[[user:| ]]value</td>
</tr>
== 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 ==
== 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 ==
 
[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]
Cbguy1
1
edit
Retrieved from "https://wiki.cdot.senecapolytechnic.ca/wiki/Special:MobileDiff/6440...8091"