---
title: border-width
slug: Web/CSS/border-width
translation_of: Web/CSS/border-width
---
<div>{{CSSRef}}</div>

<h2 id="Summary">Summary</h2>

<p>CSS свойство {{cssxref("border-width")}}<span style="line-height: 1.5;"> определяет ширину рамки элемента. Но обычно ее задают не отдельно, а в составе свойства {{cssxref("border")}}.</span></p>

<p>{{cssinfo}}</p>

<h2 id="Синтакс">Синтакс</h2>

<pre class="twopartsyntaxbox"><a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Общий синтаксис</a>: {{csssyntax("border-width")}}
</pre>

<pre>border-width: <em>ширина</em> <em>                 /* Одно значение */</em>
border-width: <em>вертикальная горизотальная</em> <em>   /* Два значения */</em>
border-width: <em>верх</em> <em>горизонтальная </em><em>основание</em><em> </em><em>   /* Три значения */</em>
border-width: <em>верх</em> <em>право</em> <em>основание</em> <em>лево </em><em> /* Четыре значения */</em>

border-width: inherit /* Родительское значение */
</pre>

<h3 id="Values">Values</h3>

<dl>
 <dt><code>&lt;br-width&gt;</code></dt>
 <dd>Is either a non-negative explicit {{cssxref("&lt;length&gt;")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
 <table class="standard-table">
  <tbody>
   <tr>
    <td style="vertical-align: middle;"><code>thin</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thin; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">A thin border</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>medium</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: medium; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">A medium border</td>
   </tr>
   <tr>
    <td style="vertical-align: middle;"><code>thick</code></td>
    <td style="vertical-align: middle;">
     <div style="margin: 0.5em; width: 3em; height: 3em; border-style: solid; border-width: thick; background-color: palegreen;"></div>
    </td>
    <td style="vertical-align: middle;">A thick border</td>
   </tr>
  </tbody>
 </table>
 The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the <code>thin ≤ medium ≤ thick</code> inequality and that the values are constant on a single document.</dd>
</dl>

<p><code>inherit</code></p>

<dl>
 <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
</dl>

<h2 id="Examples">Examples</h2>

<h3 id="A_mix_of_values_and_lengths" name="A_mix_of_values_and_lengths">A mix of values and lengths</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p id="sval"&gt;
    one value: 6px wide border on all 4 sides&lt;/p&gt;
&lt;p id="bival"&gt;
    two different values: 2px wide top and bottom border, 10px wide right and left border&lt;/p&gt;
&lt;p id="treval"&gt;
    three different values: 0.3em top, 9px bottom, and zero width right and left&lt;/p&gt;
&lt;p id="fourval"&gt;
    four different values: "thin" top, "medium" right, "thick" bottom, and 1em right&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">#sval {
    border: ridge #ccc;
    border-width: 6px;
}
#bival {
    border: solid red;
    border-width: 2px 10px;
}
#treval {
    border: dotted orange;
    border-width: 0.3em 0 9px;
}
#fourval {
    border: solid lightgreen;
    border-width: thin medium thick 1em;
}
p {
    width: auto;
    margin: 0.25em;
    padding: 0.25em;
}</pre>

<h4 id="Result">Result</h4>

<p>{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>No direct change, the {{cssxref("&lt;length&gt;")}} CSS data type extension has an effect on this property.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Added the constraint that values' meaning must be constant inside a document.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#border-width', 'border-width')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>4.0</td>
   <td>3.5</td>
   <td>1.0 (85)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.0</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>6.0</td>
   <td>11</td>
   <td>3.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li>The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}</li>
 <li>The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}</li>
</ul>