mozilla

Compare Revisions

border-width

Change Revisions

Revision 494063:

Revision 494063 by kscarfone on

Revision 573717:

Revision 573717 by J-Mackerel on

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

Revision 494063
Revision 573717
n98    <pre style="border:ridge #ccc; border-width:6px">n98    <h3 name="A_mix_of_values_and_lengths">
99border: ridge #ccc;99      A mix of values and lengths
100border-width: 6px;  /* same as "<strong>border: ridge #ccc 6px</s100    </h3>
>trong>";  6px wide border on all 4 sides */ 
101    <h4>
102      HTML
103    </h4>
104    <pre class="brush: html">
105&lt;p id="sval"&gt;
106    one value: 6px wide border on all 4 sides&lt;/p&gt;
107&lt;p id="bival"&gt;
108    two different values: 2px wide top and bottom border, 10px wi
 >de right and left border&lt;/p&gt;
109&lt;p id="treval"&gt;
110    three different values: 0.3em top, 9px bottom, and zero width
 > right and left&lt;/p&gt;
111&lt;p id="fourval"&gt;
112    four different values: "thin" top, "medium" right, "thick" bo
 >ttom, and 1em right&lt;/p&gt;
n102    <pre style="border:solid red; border-width:2px 10px">n114    <h4>
115      CSS
116    </h4>
117    <pre class="brush: css">
118#sval {
119    border: ridge #ccc;
120    border-width: 6px;
121}
122#bival {
103border: solid red;123    border: solid red;
104border-width: 2px 10px;  /* 2px wide top and bottom border, 10px 124    border-width: 2px 10px;
>right and left border */ 
125}
126#treval {
127    border: dotted orange;
128    border-width: 0.3em 0 9px;
129}
130#fourval {
131    border: solid lightgreen;
132    border-width: thin medium thick 1em;
133}
134p {
135    width: auto;
136    margin: 0.25em;
137    padding: 0.25em;
138}
n106    <pre style="border:dotted orange; border-width:0.3em 0">n140    <h4>
107border: dotted orange;141      Result
108border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no 142    </h4>
>border right and left */ 
109</pre>143    <p>
110    <pre style="border:solid lightgreen; border-width:medium 0 1p144      {{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180)
>x thick">> }}
111border: solid lightgreen;145    </p>
112border-width: medium 0 1px thick;  /* three different width, no r
>ight border */ 
113</pre>
n247              {{CompatUnknown}}n279              2.0
t253              {{CompatUnknown}}t285              6.0
254            </td>
255            <td>286            </td>
256              {{CompatUnknown}}
257            </td>287            <td>
288              11
258            <td>289            </td>
259              {{CompatUnknown}}290            <td>
291              3.0

Back to History