Compare Revisions

border-width

Change Revisions

Revision 20680:

Revision 20680 by Jürgen Jeka on

Revision 20681:

Revision 20681 by Jürgen Jeka on

Title:
border-width
border-width
Slug:
CSS/border-width
CSS/border-width
Tags:
css, "CSS Reference"
css, "CSS Reference"
Content:

Revision 20680
Revision 20681
n10    <h3 name="Summary">n10    <h3>
n14      The {{ cssxref("border-width") }} CSS property sets the widn14      The <code>border-width</code> CSS property sets the width o
>th of the border of a box.>f the border of a box.
n30    <h3 name="Syntax">n30    <h3>
n33    <pre class="eval">n33    <pre>
n36    <h3 name="Values">n36    <h3>
n53        is one value or keyword of:&nbsp;&nbsp; {{ Xref_csslengthn53        is one value or keyword of:&nbsp;&nbsp; {{ Xref_csslength
>() }} <code>| thin | medium | thick</code><br>>() }} <code>| thin | medium | thick</code>
n59        Depends on the UA. Typically <strong>1px</strong> in deskn59        Depends on the UA. Typically <strong>1px</strong> in desk
>top browsers like Firefox, Safari, Opera. <strong>2px</strong> in>top browsers like Firefox and IE 8. <strong>2px</strong> in IE 4-
> IE.>7.
n65        Depends on the UA. Typically <strong>3px</strong> in deskn65        Depends on the UA. Typically <strong>3px</strong> in desk
>top browsers like Firefox, Safari, Opera. <strong>4px</strong> in>top browsers like Firefox and IE 8. <strong>4px</strong> in IE 4-
> IE.>7.
n71        Depends on the UA. Typically <strong>5px</strong> in deskn71        Depends on the UA. Typically <strong>5px</strong> in desk
>top browsers like Firefox, Safari, Opera. <strong>6px</strong> in>top browsers like Firefox and IE 8. <strong>6px</strong> in IE 4-
> IE.>7.
n80    <h3 name="Related_properties">n80    <h3>
n93    <h3 name="Examples">n93    <h3>
n99    <pre>n99    <pre style="border:ridge #ccc; border-width:6px">
100element {
101    border: solid #ccc;100border: ridge #ccc;
102    border-width: 5px;        /* 5px wide border on all 4 sides; 101border-width: 6px;  /* same as "border: ridge #ccc 6px";  5px wid
>same as  "border: solid #ccc 5px" */>e border on all 4 sides */
103}102</pre>
104 103    <pre style="border:solid red; border-width:2px 10px">
105element  border: solid red;104border: solid red;
106    border-width: 2px 4px;    /* 2px wide top and bottom border, 105border-width: 2px 10px;  /* 2px wide top and bottom border, 10px 
>4px right and left border */>right and left border */
107}106</pre>
108 107    <pre style="border:dotted orange; border-width:0.3em 0">
109element {
110    border: solid orange;108border: dotted orange;
111    border-width: 0.3em 0;   /* 0.3em wide top and bottom border,109border-width: 0.3em 0;   /* 0.3em wide top and bottom border, no 
> no border on right and left side */>border right and left */
112}110</pre>
113 111    <pre style="border:solid lightgreen; border-width:medium 0 1p
 >x thick">
114element { 
115    border: solid lightgreen;112border: solid lightgreen;
116    border-width: medium 0 1px thick;  /* three different width, 113border-width: medium 0 1px thick;  /* three different width, no r
>no border on the right side */>ight border */
117}
n127        <a class="external" href="http://www.w3.org/TR/css3-backgn123        <a class="external" href="http://www.w3.org/TR/css3-backg
>round/#the-border-width" title="http://www.w3.org/TR/css3-backgro>round/#the-border-width" title="http://www.w3.org/TR/css3-backgro
>und/#the-border-width"><span style="text-decoration: underline;">>und/#the-border-width"><span style="text-decoration: underline;">
>CSS 3 Background #border-width</span></a>>CSS 3 Background #border-width</span></a> Working draft
n130    <h3 name="Browser_Compatibility">n126    <h3>
t178      &nbsp;See Alsot174      See Also

Back to History