{"json_modified": "2016-10-19T06:36:12.200682", "uuid": "bdf04482-1850-4ed6-87ee-8108c90db9af", "title": "border-image", "url": "/en-US/docs/Web/CSS/border-image", "tags": ["CSS", "Reference", "CSS Property", "CSS Borders"], "translations": [{"uuid": "e14892f8-476b-42ef-b3c0-9a85fd4b0e57", "title": "border-image", "url": "/de/docs/Web/CSS/border-image", "tags": ["Grafik", "CSS", "CSS R\u00e4nder", "Referenz", "Web", "CSS Eigenschaft", "Layout"], "summary": "Die <code>border-image</code> CSS Eigenschaft erm\u00f6glicht das Zeichnen eines Bildes an den R\u00e4ndern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun K\u00e4sten um das Element f\u00fcr einige F\u00e4lle \u00fcberfl\u00fcssig.<br/><br/><code>border-image</code> wird anstatt der Randstile benutzt, die durch die <a href=\"/de/docs/Web/CSS/border-style\" title=\"Die border-style CSS Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils f&#xFC;r alle vier Seiten des Elementrands.\"><code>border-style</code></a> Eigenschaft definiert werden. Es ist wichtig\u00a0anzumerken, dass, wenn der berechnete Wert von <a href=\"/de/docs/Web/CSS/border-image-source\" title=\"Die border-image-source CSS Eigenschaft definiert den &lt;image&gt; Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf none gesetzt wird, wird der Stil verwendet, der durch border-style definiert wird.\"><code>border-image-source</code></a>, welcher entweder durch <code>border-image-source</code> oder die Kurzschreibweise <code>border-image</code> gesetzt werden kann, <code>none</code> ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.", "localization_tags": [], "locale": "de", "last_edit": "2016-09-26T02:38:54", "review_tags": []}, {"uuid": "7440aeb5-25c5-4f4c-9c3e-2fa88371dfee", "title": "border-image", "url": "/es/docs/Web/CSS/border-image", "tags": ["CSS", "Reference", "CSS Property", "CSS Borders"], "summary": "La propiedad de CSS\u00a0\u00a0 <code>border-image</code> permite utilizar una im\u00e1gen para definir los bordes de los elementos. Esto hace que dibujarlos sea m\u00e1s simple y elimina la necesidad de utilizar muchas cajas en algunos casos.", "localization_tags": [], "locale": "es", "last_edit": "2015-11-13T05:57:53", "review_tags": []}, {"uuid": "91e6d472-1923-407c-a328-c52410ba3d58", "title": "border-image", "url": "/fr/docs/Web/CSS/border-image", "tags": ["CSS", "Propri\u00e9t\u00e9", "R\u00e9f\u00e9rence"], "summary": "La propri\u00e9t\u00e9 <strong><code>border-image</code></strong> permet de dessiner une image sur la bordure d'un \u00e9l\u00e9ment. C'est une propri\u00e9t\u00e9 raccourcie qui permet de d\u00e9finir <a href=\"/fr/docs/Web/CSS/border-image-source\" title=\"La propri&#xE9;t&#xE9; border-image-source d&#xE9;finit l'image (type &lt;image&gt;) qu'on souhaite utiliser pour mettre en forme la bordure &#xE0; la place du style. Si la valeur de cette propri&#xE9;t&#xE9; vaut none, ce sera la mise en forme d&#xE9;finie par la propri&#xE9;t&#xE9; border-style qui sera utilis&#xE9;e.\"><code>border-image-source</code></a>, <a href=\"/fr/docs/Web/CSS/border-image-width\" title=\"La propri&#xE9;t&#xE9; border-image-width d&#xE9;finit la largeur de la bordure imag&#xE9;e en exprimant des longueurs depuis le contour de la bo&#xEE;te de bordure vers l'int&#xE9;rieur de l'&#xE9;l&#xE9;ment. Si border-image-width est sup&#xE9;rieur &#xE0; border-width, la bordure imag&#xE9;e s'&#xE9;tendra au-del&#xE0; du padding voire du contenu.\"><code>border-image-width</code></a>, <a href=\"/fr/docs/Web/CSS/border-image-repeat\" title=\"La propri&#xE9;t&#xE9; border-image-repeat d&#xE9;finit la fa&#xE7;on dont les zones de l'image de bordure sont utilis&#xE9;e pour s'&#xE9;tendre sur chacun des c&#xF4;t&#xE9;s de la bordure. Cette propri&#xE9;t&#xE9; est multi-valu&#xE9;e : une valeur indiquera le comportement pour tous les c&#xF4;t&#xE9;s et deux valeurs indiqueront respectivement le comportement pour les c&#xF4;t&#xE9;s horizontaux et verticaux.\"><code>border-image-repeat</code></a>, <a href=\"/fr/docs/Web/CSS/border-image-slice\" title=\"La propri&#xE9;t&#xE9; border-image-slice permet de d&#xE9;couper l'image fournie via la propri&#xE9;t&#xE9; border-image-source en 9 r&#xE9;gions : quatre pour les coins, quatre pour les c&#xF4;t&#xE9;s et une pour le milieu. Ces r&#xE9;gions sont d&#xE9;finies &#xE0; l'aide de quatre valeurs mesur&#xE9;es depuis les bords vers l'int&#xE9;rieur de l'image.\"><code>border-image-slice</code></a>, <a href=\"/fr/docs/Web/CSS/border-image-outset\" title=\"La propri&#xE9;t&#xE9; border-image-outset d&#xE9;crit l'espace dont l'image de la bordure d&#xE9;passe de la bo&#xEE;te de bordure.\"><code>border-image-outset</code></a>.\u00a0 Cela permet d'obtenir des effets de dessin complexes sans avoir \u00e0 complexifier l'utilisation des bo\u00eetes CSS. La propri\u00e9t\u00e9 <code>border-image</code> sera utilis\u00e9e plut\u00f4t que le style d\u00e9fini via la propri\u00e9t\u00e9 <a href=\"/fr/docs/Web/CSS/border-style\" title=\"La propri&#xE9;t&#xE9; border-style est une propri&#xE9;t&#xE9; raccourcie qui permet de d&#xE9;finir le style des lignes utilis&#xE9;es pour les bordures des quatre c&#xF4;t&#xE9;s de la bo&#xEE;te d'un &#xE9;l&#xE9;ment.\"><code>border-style</code></a>. Selon la sp\u00e9cification, <code>border-style</code> <strong>doit</strong> \u00eatre pr\u00e9sente si <code>border-image</code> est utilis\u00e9e.", "localization_tags": [], "locale": "fr", "last_edit": "2016-07-27T10:41:24", "review_tags": []}, {"uuid": "dbfa2ef7-f88e-4bad-9ec8-37c6504429d5", "title": "border-image", "url": "/ja/docs/Web/CSS/border-image", "tags": ["CSS", "Reference", "CSS Property", "CSS Borders"], "summary": "CSS \u306e <code>border-image</code> \u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u4f7f\u3063\u3066\u3001\u8981\u7d20\u306e\u30dc\u30fc\u30c0\u30fc\u306b\u753b\u50cf\u3092\u63cf\u304f\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u8907\u96d1\u306a\u898b\u305f\u76ee\u306e\u30a6\u30a3\u30b8\u30a7\u30c3\u30c8\u3092\u4ee5\u524d\u3088\u308a\u7c21\u5358\u306b\u63cf\u304f\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u3001\u5834\u5408\u306b\u3088\u3063\u3066\u306f 9 \u3064\u306e\u7bb1\u3092\u6e96\u5099\u3059\u308b\u5fc5\u8981\u3082\u306a\u304f\u306a\u308a\u307e\u3057\u305f\u3002", "localization_tags": [], "locale": "ja", "last_edit": "2015-11-13T05:43:47", "review_tags": []}, {"uuid": "156f5b92-ea7b-409f-8212-a271cc63b2d7", "title": "border-image", "url": "/zh-CN/docs/Web/CSS/border-image", "tags": ["CSS", "Reference", "CSS Property", "CSS Borders"], "summary": "<code>border-image \u5c5e\u6027\u7528\u6765\u7ed9\u5143\u7d20\u8fb9\u6846\u6dfb\u52a0\u80cc\u666f\u56fe\u7247\u3002\u8fd9\u4f7f\u7ed8\u5236\u590d\u6742\u5916\u89c2\u7ec4\u4ef6\u66f4\u7b80\u5355\uff0c\u5728\u6709\u4e9b\u60c5\u51b5\u4e0b\u4f7f\u7528\u4e5d\u5bab\u683c\u4e5f\u4e0d\u518d\u5fc5\u8981\u3002</code><code>\u6d4f\u89c8\u5668\u5e94\u7528\u4e86 border-image \u5219\u4e0d\u518d\u5e94\u7528 </code><a href=\"/zh-CN/docs/Web/CSS/border-style\" title=\"border-style&#xA0;&#x662F;&#x4E00;&#x4E2A;&#xA0;CSS&#xA0;&#x7B80;&#x5199;&#x5C5E;&#x6027;&#xFF0C;&#x7528;&#x6765;&#x8BBE;&#x5B9A;&#x5143;&#x7D20;&#x6240;&#x6709;&#x8FB9;&#x6846;&#x7684;&#x6837;&#x5F0F;&#x3002;\"><code>border-style</code></a> \u3002", "localization_tags": [], "locale": "zh-CN", "last_edit": "2015-11-13T05:43:17", "review_tags": []}, {"uuid": "e1863589-1c5c-46d7-a0c4-61a70b64a85f", "title": "-moz-border-image", "url": "/zh-TW/docs/Web/CSS/-moz-border-image", "tags": [], "summary": "CSS \u5c6c\u6027 <code>border-image</code> \u53ef\u4ee5\u8b93\u4f60\u5728\u5143\u7d20\u7684\u908a\u6846\u4e0a\u64fa\u4e0a\u5716\u7247\u3002\u9019\u8b93\u5448\u73fe\u770b\u4f3c\u5f88\u8907\u96dc\u7684\u4e00\u500b\u7db2\u9801\u7684\u5c0f\u55ae\u5143\u7c21\u55ae\u5f88\u591a\uff0c\u5b83\u53ef\u4ee5\u7701\u6700\u591a\u4e5d\u500b\u5143\u7d20\u3002", "localization_tags": [], "locale": "zh-TW", "last_edit": "2014-07-01T01:10:32", "review_tags": []}], "modified": "2016-10-19T06:35:08", "label": "border-image", "localization_tags": [], "locale": "en-US", "id": 754, "last_edit": "2016-07-27T06:55:22", "summary": "The <strong><code>border-image</code></strong> CSS property allows drawing an image on the borders of elements. This makes drawing complex looking widgets much simpler than it has been and removes the need for nine boxes in some cases. The <code>border-image</code> is used instead of the border styles given by the <a href=\"/en-US/docs/Web/CSS/border-style\" title=\"The border-style property is a shorthand property for setting the line style for all four sides of the element&#xB4;s border.\"><code>border-style</code></a> properties. Though the specification requires that <code>border-style</code> must be present if <code>border-image</code> is used, some browsers many not implement this.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "Summary", "title": "Summary"}, {"id": "Syntax", "title": "Syntax"}, {"id": "Values", "title": "Values"}, {"id": "Formal_syntax", "title": "Formal syntax"}, {"id": "Examples", "title": "Examples"}, {"id": "Bitmap", "title": "Bitmap"}, {"id": "CSS_content", "title": "CSS content"}, {"id": "HTML_content", "title": "HTML content"}, {"id": "Gradient", "title": "Gradient"}, {"id": "CSS_content_2", "title": "CSS content"}, {"id": "HTML_content_2", "title": "HTML content"}, {"id": "Specifications", "title": "Specifications"}, {"id": "Browser_compatibility", "title": "Browser compatibility"}], "slug": "Web/CSS/border-image", "review_tags": []}