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

<h2 id="Описание" style="">Описание</h2>

<p>he <strong><code>border-image-width</code></strong> CSS property defines the width of the border image by defining inward offsets from the border edges. If the <code>border-image-width</code> is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.</p>

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

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

<pre class="brush:css">/* border-image-width: <em>all</em> */
border-image-width: 3;

/* border-image-width: <em>vertical horizontal</em> */
border-image-width: 2em 3em;

/* border-image-width: <em>top horizontal bottom</em> */
border-image-width: 5% 15% 10%;

/* border-image-width: <em>top</em> <em>right</em> <em>bottom</em> <em>left</em> */
border-image-width: 5% 2em 10% auto;

/* Global values */
border-image-width: inherit;
border-image-width: initial;
border-image-width: unset;
</pre>

<p style="">где:</p>

<dl style="">
 <dt style=""><em>width</em></dt>
 <dd style="">Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.</dd>
 <dt style=""><em>vertical</em></dt>
 <dd>Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.</dd>
 <dt><em>horizontal</em></dt>
 <dd>Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.</dd>
 <dt><em>top</em></dt>
 <dd>Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.</dd>
 <dt><em>bottom</em></dt>
 <dd>Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.</dd>
 <dt><em>right</em></dt>
 <dd>Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.</dd>
 <dt><em>left</em></dt>
 <dd>Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.</dd>
 <dt><code>inherit</code></dt>
 <dd>Is a keyword indicating that all four values are inherited from their parent's element calculated value.</dd>
</dl>

<h3 id="Значения" style="">Значения</h3>

<dl style="">
 <dt><code>&lt;length&gt;</code></dt>
 <dd>Represents the width of the border. It can be an absolute or relative length. This length must not be negative.</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd style="">Represents the width of the border as a percentage of the element. The percentage must not be negative.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.</dd>
 <dt><code>auto</code></dt>
 <dd>Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.</dd>
</dl>

<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>

{{csssyntax}}

<h2 id="Примеры" style="">Примеры</h2>

<h3 id="HTML_Content">HTML Content</h3>

<pre class="brush: html">&lt;!DOCTYPE html&gt;

&lt;html&gt;
   &lt;head&gt;&lt;/head&gt;
   &lt;body&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
      At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
      no sea takimata sanctus est Lorem ipsum dolor sit amet.&lt;/p&gt;
   &lt;/body&gt;
&lt;/html&gt;
</pre>

<h3 id="CSS_Content">CSS Content</h3>

<pre class="brush: css">p {
   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
   border-image-slice: 30;
   border-image-width: 20px;
   border-image-repeat: round;
   padding: 40px;
}</pre>

<p style="">{{ EmbedLiveSample('Examples', '480', '320', '', 'Web/CSS/border-image-width') }}</p>

<h2 id="Specifications" name="Specifications" style="">Спецификации</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', '#border-image-width', 'border-image-width')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2>

<div style="">{{CompatibilityTable}}</div>

<div id="compat-desktop" style="">
<table class="compat-table">
 <tbody>
  <tr style="">
   <th style="">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>15.0</td>
   <td>{{CompatGeckoDesktop("13.0")}}</td>
   <td>11</td>
   <td>15</td>
   <td>6</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>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("13.0")}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>