initial commit

1 files changed, 168 insertions, 0 deletions

diff --git a/files/ru/web/css/border-image-width/index.html b/files/ru/web/css/border-image-width/index.html
new file mode 100644
index 0000000000..4f5afbb25d
--- /dev/null
+++ b/files/ru/web/css/border-image-width/index.html
@@ -0,0 +1,168 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>