{"id":375434,"date":"2022-12-06T07:31:59","date_gmt":"2022-12-06T15:31:59","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=375434"},"modified":"2022-12-20T08:00:11","modified_gmt":"2022-12-20T16:00:11","slug":"border-image-repeat","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-repeat\/","title":{"rendered":"border-image-repeat"},"content":{"rendered":"\n<p>The CSS <code>border-image-repeat<\/code> property controls how a border image is repeated to fill the outer edges of an element. It can also control the center of an element\u2019s background when <code>border-image-slice<\/code> is set to <code>fill<\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"6\"><code markup=\"tt\">.container {\n  border-style: ridge;\n  border-width: 3rem;\n  border-image-source: url('path\/to\/image.jpg');\n  border-image-slice: 70; \n  border-image-repeat: repeat;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ExRmoWQ\" src=https://css-tricks.com/"////codepen.io//anon//embed//ExRmoWQ?height=450&amp;theme-id=1&amp;slug-hash=ExRmoWQ&amp;default-tab=result&amp;editable=true\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ExRmoWQ\" title=\"CodePen Embed ExRmoWQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>border-image-repeat<\/code> property is defined in the <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-backgrounds-3///" rel=\"noopener\">CSS Backgrounds and Borders Module Level 3 specification<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">border-image-repeat: stretch | repeat | round | space<\/code><\/pre>\n\n\n\n<ul>\n<li><strong>Initial value:<\/strong> <code>stretch<\/code><\/li>\n\n\n\n<li><strong>Applies to:<\/strong> all elements (including the <code>::first-letter<\/code> pseudo-element), except internal table elements when <code>border-collapse<\/code> is set to <code>collapse<\/code>.<\/li>\n\n\n\n<li><strong>Inherited:<\/strong> no<\/li>\n\n\n\n<li><strong>Percentages:<\/strong> n\/a<\/li>\n\n\n\n<li><strong>Computed value:<\/strong> two keywords, one per axis<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> discrete<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword values *\/\nborder-image-repeat: stretch;\nborder-image-repeat: repeat;\nborder-image-repeat: round;\nborder-image-repeat: space;\n\n\/* Multiple value syntax *\/\nborder-image-repeat: stretch repeat;\nborder-image-repeat: stretch round;\nborder-image-repeat: stretch space;\n\nborder-image-repeat: round stretch;\nborder-image-repeat: round repeat;\nborder-image-repeat: round space;\n\nborder-image-repeat: repeat stretch;\nborder-image-repeat: repeat round;\nborder-image-repeat: repeat space;\n\nborder-image-repeat: space stretch;\nborder-image-repeat: space round;\nborder-image-repeat: space repeat;\n\n\/* Global values *\/\nborder-image-repeat: inherit;\nborder-image-repeat: initial;\nborder-image-repeat: revert;\nborder-image-repeat: revert-layer;\nborder-image-repeat: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"stretch\"><code>stretch<\/code><\/h4>\n\n\n<p>This is the default value. It stretches the image to fill in the border region.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvXdpYW\" src=https://css-tricks.com/"////codepen.io//anon//embed//preview//wvXdpYW?height=450&amp;theme-id=1&amp;slug-hash=wvXdpYW&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvXdpYW\" title=\"CodePen Embed wvXdpYW\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"repeat\"><code>repeat<\/code><\/h4>\n\n\n<p>This value repeats the border image in tiles to fill the border region. If the tiling reaches a point where there is no more space for a full tile, that tile may be clipped to properly fill the remaining space to prevent gaps.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKemZGq\" src=https://css-tricks.com/"////codepen.io//anon//embed//preview//KKemZGq?height=450&amp;theme-id=1&amp;slug-hash=KKemZGq&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKemZGq\" title=\"CodePen Embed KKemZGq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"round\"><code>round<\/code><\/h4>\n\n\n<p>Like <code>repeat<\/code>, this value repeats and stretches the image to fill all the border sides. But unlike <code>repeat<\/code>, the <code>round<\/code> value will rescale the image to prevent gaps rather than clipping tiles.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_OJEmzaN\" src=https://css-tricks.com/"////codepen.io//anon//embed//preview//OJEmzaN?height=450&amp;theme-id=1&amp;slug-hash=OJEmzaN&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJEmzaN\" title=\"CodePen Embed OJEmzaN\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"space\"><code>space<\/code><\/h4>\n\n\n<p>Like the other values, <code>space<\/code> repeats the border image in tiles to fill the border region. If there is an space leftover, <code>space<\/code> will distribute it around the tiles to fill the entire area rather than clipping and stretching tiles, or rescaling the image.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWXmrzr\" src=https://css-tricks.com/"////codepen.io//anon//embed//preview//MWXmrzr?height=450&amp;theme-id=1&amp;slug-hash=MWXmrzr&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWXmrzr\" title=\"CodePen Embed MWXmrzr\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"some-background\">Some background<\/h3>\n\n\n<p>We can set an image to be used as the border of an element:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  border-image-source: url(\"\/path\/to\/image.webp\");\n}<\/code><\/pre>\n\n\n\n<p>That won\u2019t do anything because we haven\u2019t actually set the border\u2019s width and style, so let\u2019s do that:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  border: 2.5rem solid; \/* shorthand for `border-width` and `border-style` *\/\n  border-image-source: url(\"\/path\/to\/image.webp\");\n}<\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">We don\u2019t have to set the <code>border-color<\/code> but it might be a good idea as a fallback in the event the border image file fails to load for some reason.<\/p>\n\n\n\n<p>That draws our border using the image file we supply for it (<a href=https://css-tricks.com/"https:////img.freepik.com//premium-vector//hand-painted-background-violet-orange-colours_23-2148427578.jpg?w=740\%22 rel=\"noopener\">here\u2019s the file<\/a> we\u2019re using in the examples):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRGMqPM\" src=https://css-tricks.com/"////codepen.io//anon//embed//preview//GRGMqPM?height=450&amp;theme-id=1&amp;slug-hash=GRGMqPM&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRGMqPM\" title=\"CodePen Embed GRGMqPM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We\u2019ve generated images for all directions of the border. The problem is we haven\u2019t provided any instructions for what to do with that image to fill the available space. But first, we can \u201cslice\u201d the image with <code>border-image-slice<\/code>. That divides into nine sections \u2014 the four corners, the four sides, and the center.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//11//s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1667807686884_border-image-repeatillustration.png?resize=1200%2C630&amp;ssl=1\%22 alt=\"The borders of the top, left, right, bottom, and middle parts of an element.\" class=\"wp-image-375437\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1667807686884_border-image-repeatillustration.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1667807686884_border-image-repeatillustration.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1667807686884_border-image-repeatillustration.png?resize=1024%2C538&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1667807686884_border-image-repeatillustration.png?resize=768%2C403&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Once the border image is sliced up, the tiles are positioned and <code>border-image-repeat: stretch<\/code> (the default value) takes over to stretch the entire image to fill all of the available space we drew for the border.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_GRGMqay\" src=https://css-tricks.com/"////codepen.io//anon//embed//preview//GRGMqay?height=450&amp;theme-id=1&amp;slug-hash=GRGMqay&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed GRGMqay\" title=\"CodePen Embed GRGMqay\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we can explicitly declare <code>border-image-repeat<\/code> and set it with any of the values we covered.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"drawing-border-images-with-two-repeat-values\">Drawing border images with two repeat values<\/h3>\n\n\n<p>So, <code>border-image-repeat<\/code> can take up to two values. When we work with the two-value syntax, the first keyword sets the scaling and tiling in the <strong>horizontal direction<\/strong> (the top and bottom border edges). It can also set the middle region when <code>border-image-slice<\/code> is set to <code>fill<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//11//s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668243584884_first-keyword-example.png?resize=1200%2C630&amp;ssl=1\%22 alt=\"The borders of the top, bottom, and middle parts of an element.\" class=\"wp-image-375438\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668243584884_first-keyword-example.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668243584884_first-keyword-example.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668243584884_first-keyword-example.png?resize=1024%2C538&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668243584884_first-keyword-example.png?resize=768%2C403&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The second keyword in the two-value syntax sets the scaling and tiling in the <strong>vertical direction<\/strong> (the left and right border edges), as well as the middle image when <code>border-image-slice<\/code> is set to <code>fill<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"630\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//11//s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668250109136_second-keyword-example.png?resize=1200%2C630&amp;ssl=1\%22 alt=\"The borders of the left, right, and middle parts of an element.\" class=\"wp-image-375439\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668250109136_second-keyword-example.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668250109136_second-keyword-example.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668250109136_second-keyword-example.png?resize=1024%2C538&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/s_2CE3A930D4781C01E9F4D30339542B6FC6B6D3DB9D65EE6B883EC2CD90C09197_1668250109136_second-keyword-example.png?resize=768%2C403&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The official specification does a remarkable job <a href=https://css-tricks.com/"https:////w3c.github.io//csswg-drafts//css-backgrounds//#border-image-process\" rel=\"noopener\">outlining the process that takes place<\/a> when repeating a border image with the two-value syntax. We\u2019ll plop it in here verbatim:<\/p>\n\n\n\n<ul>\n<li><strong>If the first keyword is<\/strong> <code>stretch<\/code><strong>,<\/strong> the top, middle and bottom images are further scaled to be as wide as the middle part of the border image area. The height is not changed any further.<\/li>\n\n\n\n<li><strong>If the first keyword is<\/strong> <code>round<\/code><strong>,<\/strong> the top, middle and bottom images are resized in width, so that exactly a whole number of them fit in the middle part of the <code>border-image<\/code> area, exactly as for <code>round<\/code> in the <code>background-repeat<\/code> property.<\/li>\n\n\n\n<li><strong>If the first keyword is<\/strong> <code>repeat<\/code> <strong>or<\/strong> <code>space<\/code><strong>,<\/strong> the top, middle, and bottom images are not changed any further.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<script src=https://css-tricks.com/"https:////cdn.jsdelivr.net//gh//ireade//caniuse-embed//public//caniuse-embed.min.js/"><\/script>\n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__border-image-repeat\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul>\n<li><a href=https://css-tricks.com/"https:////w3c.github.io//csswg-drafts//css-backgrounds//#border-image-repeat\" rel=\"noopener\">CSS Backgrounds and Borders Module Level 3<\/a> (W3C specification)<\/li>\n\n\n\n<li><a href=https://css-tricks.com/"https:////css-tricks.com//understanding-border-image///">Understanding <code>border-image<\/code><\/a> (CSS-Tricks)<\/li>\n\n\n\n<li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//css-gradient-borders-pure-css?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_almanac\%22 rel=\"noopener\">How To Add Border Images and Gradient Borders with Pure CSS<\/a> (DigitalOcean)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The CSS border-image-repeat property controls how a border image is repeated to fill the outer edges of an element. It [&hellip;]<\/p>\n","protected":false},"author":288695,"featured_media":300990,"parent":13913,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/375434"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288695"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=375434"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/375434\/revisions"}],"predecessor-version":[{"id":375873,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/375434\/revisions\/375873"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=375434"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=375434"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}