Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Compare Revisions

border-top-style

Change Revisions

Revision 494059:

Revision 494059 by kscarfone on

Revision 562329:

Revision 562329 by J-Mackerel on

Title:
border-top-style
border-top-style
Slug:
Web/CSS/border-top-style
Web/CSS/border-top-style
Tags:
"CSS", "CSS Borders", "NeedsLiveSample", "CSS Property", "Web", "Layout", "Reference"
"CSS Borders", "CSS", "Reference", "Référence", "Web", "CSS Property", "Layout"
Content:

Revision 494059
Revision 562329
n71                <div style="margin:0.5em; width:3em; height:3em; n71                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:hidden; background-color:palegreen;">>border-width:3px; border-top-style:hidden; background-color:paleg
 >reen;">
n84                <div style="margin:0.5em; width:3em; height:3em; n84                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:dotted; background-color:palegreen;">>border-width:3px; border-top-style:dotted; background-color:paleg
 >reen;">
n97                <div style="margin:0.5em; width:3em; height:3em; n97                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:dashed; background-color:palegreen;">>border-width:3px; border-top-style:dashed; background-color:paleg
 >reen;">
n110                <div style="margin:0.5em; width:3em; height:3em; n110                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:solid; background-color:palegreen;">>border-width:3px; border-top-style:solid; background-color:palegr
 >een;">
n123                <div style="margin:0.5em; width:3em; height:3em; n123                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:double; background-color:palegreen;">>border-width:3px; border-top-style:double; background-color:paleg
 >reen;">
n136                <div style="margin:0.5em; width:3em; height:3em; n136                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:groove; background-color:palegreen;">>border-width:3px; border-top-style:groove; background-color:paleg
 >reen;">
n149                <div style="margin:0.5em; width:3em; height:3em; n149                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:ridge; background-color:palegreen;">>border-width:3px; border-top-style:ridge; background-color:palegr
 >een;">
n162                <div style="margin:0.5em; width:3em; height:3em; n162                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:inset; background-color:palegreen;">>border-width:3px; border-top-style:inset; background-color:palegr
 >een;">
n175                <div style="margin:0.5em; width:3em; height:3em; n175                <div style="margin:0.5em; width:3em; height:3em; 
>border-top-style:outset; background-color:palegreen;">>border-width:3px; border-top-style:outset; background-color:paleg
 >reen;">
nn191      <dd>
192        Represents the border style used by the parent of the cur
 >rent element.
193      </dd>
nn195    <h2 name="Examples">
196      Examples
197    </h2>
198    <h4>
199      HTML Content
200    </h4>
201    <pre class="brush: html">
202&lt;table&gt;
203    &lt;tr&gt;
204        &lt;td class="b1"&gt;none&lt;/td&gt;
205        &lt;td class="b2"&gt;hidden&lt;/td&gt;
206        &lt;td class="b3"&gt;dotted&lt;/td&gt;
207        &lt;td class="b4"&gt;dashed&lt;/td&gt;
208    &lt;/tr&gt;
209    &lt;tr&gt;
210        &lt;td class="b5"&gt;solid&lt;/td&gt;
211        &lt;td class="b6"&gt;double&lt;/td&gt;
212        &lt;td class="b7"&gt;groove&lt;/td&gt;
213        &lt;td class="b8"&gt;ridge&lt;/td&gt;
214    &lt;/tr&gt;
215    &lt;tr&gt;
216        &lt;td class="b9"&gt;inset&lt;/td&gt;
217        &lt;td class="b10"&gt;outset&lt;/td&gt;
218    &lt;/tr&gt;
219&lt;/table&gt;
220</pre>
221    <h4>
222      CSS Content
223    </h4>
224    <pre class="brush: css">
225/* Define look of the table */
226table {
227    border-width: 2px;
228    background-color: #52E385;
229}
230tr, td {
231    padding: 3px;
232}
233 
234/* border-top-style example classes */
235.b1 {border-top-style:none;}
236.b2 {border-top-style:hidden;}
237.b3 {border-top-style:dotted;}
238.b4 {border-top-style:dashed;}
239.b5 {border-top-style:solid;}
240.b6 {border-top-style:double;}
241.b7 {border-top-style:groove;}
242.b8 {border-top-style:ridge;}
243.b9 {border-top-style:inset;}
244.b10 {border-top-style:outset;}
245</pre>
246    <h4>
247      Output
248    </h4>
n193      &nbsp; Represents the border style used by the parent of thn250      {{ EmbedLiveSample('Examples', 300, 200) }}
>e current element. 
t195    <h2 id="Examples">t
196      Examples
197    </h2>
198    <pre class="brush: css; highlight:[3]">
199element {
200        border-top-width: 1px;
201        border-top-style: dotted;
202        border-top-color: #000;
203}
204</pre>

Back to History