mozilla

Compare Revisions

border-width

Change Revisions

Revision 20675:

Revision 20675 by Nathymig on

Revision 20676:

Revision 20676 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 20675
Revision 20676
n14      <code>border-width</code> sets the width of the border of an14      border-width sets the width of the border of a box.
> box. 
n34 border-width: &lt;border-width-value&gt; {1,4} | {{ Cssxref("inhn34 border-width: &lt;border-width&gt; {1,4}
>erit") }} 
n41        <b>&lt;border-width-value&gt;</b>n41        <strong>&lt;border-width&gt;</strong>
n44        <code>thin | medium | thick |</code> {{ Xref_csslength() n44        {{ Xref_csslength() }} | <code>thin | medium | thick</cod
>}} <code>|</code> {{ Xref_csspercentage() }}>e><br>
45        One, two, three or four {{ Xref_csslength() }} values and
 >/or keywords.<br>
46        If <strong>one</strong> value is set, this width applies 
 >to <strong>all 4 sides</strong>.<br>
47        If <strong>two</strong> values are set, the <strong>first
 ></strong> applies to <strong>top and bottom</strong>, the <strong
 >>second</strong> applies to the <strong>right and left</strong> s
 >ide.<br>
48        <strong>Three</strong> values apply to the top, right and
 > bottom side. The left side takes the second value.<br>
49        <strong>Four</strong> values apply to the <strong>top, ri
 >ght, bottom, left</strong> side in that order.
n50        A thin border.n55        Depends on the UA. Typically <strong>1px</strong> in desk
 >top browsers like Firefox, Safari, Opera. <strong>2px</strong> in
 > IE.
n56        A medium border.n61        Depends on the UA. Typically <strong>3px</strong> in desk
 >top browsers like Firefox, Safari, Opera. <strong>4px</strong> in
 > IE.
n62        A thick border.n67        Depends on the UA. Typically <strong>5px</strong> in desk
 >top browsers like Firefox, Safari, Opera. <strong>6px</strong> in
 > IE.<br>
n65        &lt;length&gt;n70        <a class="internal" href="/en/CSS/length" title="en/CSS/l
 >ength">&lt;length&gt;</a>
n68        The border's thickness has an explicit value. Explicit bon73        The border's thickness has an explicit value. Cannot be n
>rder widths cannot be negative.>egative.
69      </dd>
70      <dt>
71        &lt;percentage&gt;
72      </dt>
73      <dd>
74        The border's thickness has a percentage value, percentage
>s of the containing block's width. Explicit border widths cannot  
>be negative. 
n77    <p>n
78      Note: An <code>em</code> value is also supported.
79    </p>
n94      <br>n90      &nbsp;
nn99element {
100    border: solid blue;
101    border-width: 2px 4px;     /* 2px top and bottom border, 4px 
 >right an left border */
102}
103 
n104    border-width: thin;n
105    border-style: solid;105    border: solid red;
106    border-color: #000;106    border-width: medium 0 1px thick;  /* 3 different width, righ
 >t side has no border */
n117        <a class="external" href="http://www.w3.org/TR/CSS21/box.n117        <a class="external" href="http://www.w3.org/TR/CSS21/box.
>html#border-width-properties">CSS 2.1</a>>html#border-width-properties" title="http://www.w3.org/TR/CSS21/b
 >ox.html#border-width-properties">CSS 2.1 Box #border-width</a>
n120        <a class="external" href="http://www.w3.org/TR/css3-backgn120        <a class="external" href="http://www.w3.org/TR/css3-backg
>round/#border-width">CSS 3</a>>round/#the-border-width" title="http://www.w3.org/TR/css3-backgro
 >und/#the-border-width"><span style="text-decoration: underline;">
 >CSS 3 Background #border-width</span></a>
nn140          <td>
141            &nbsp;
140          <td></td>142          </td>
nn148          <td>
149            &nbsp;
146          <td></td>150          </td>
nn156          <td>
157            &nbsp;
152          <td></td>158          </td>
nn164          <td>
165            &nbsp;
158          <td></td>166          </td>
n163      <br>n171      &nbsp;
tt178    </p>
179    <p>
170    </p>{{ languages( { "fr": "fr/CSS/border-width", "pl": "pl/CS180      {{ languages( { "fr": "fr/CSS/border-width", "pl": "pl/CSS/
>S/border-width", "es": "es/CSS/border-width" } ) }}>border-width", "es": "es/CSS/border-width" } ) }}
181    </p>

Back to History