{"id":375796,"date":"2022-12-20T06:03:17","date_gmt":"2022-12-20T14:03:17","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=375796"},"modified":"2022-12-20T08:00:25","modified_gmt":"2022-12-20T16:00:25","slug":"border-image-slice","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-slice\/","title":{"rendered":"border-image-slice"},"content":{"rendered":"\n<p>The CSS <code>border-image-slice<\/code> tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s borders.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">.element {\n  border-style: ridge;\n  border-width: 3rem;\n  border-image-source: url('path\/to\/image.jpg');\n  border-image-slice: 30%;\n  border-image-repeat: repeat; \n}<\/code><\/pre>\n\n\n\n<p>The <code>border-image-slice<\/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\n<!--more-->\n\n\n\n<p>When the border image is sliced, it is divided into nine sections \u2014 the four corners, the four sides, and the middle \u2014 by drawing four invisible slice lines over the image that form regions sort of like a grid. The property values offset that grid of slice lines from the image\u2019s respective sides.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoaXjoo\" src=https://css-tricks.com/"////codepen.io//anon//embed//PoaXjoo?height=600&amp;theme-id=1&amp;slug-hash=PoaXjoo&amp;default-tab=result\%22 height=\"600\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoaXjoo\" title=\"CodePen Embed PoaXjoo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<ul>\n<li>Areas 1-4 represent the four corner regions.<\/li>\n\n\n\n<li>Areas 5-8 represent the four side regions.<\/li>\n\n\n\n<li>Area 9 represents the middle region.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>Adjust the <code>border-image-slice<\/code> values in the following demo to see how the image offsets at different lengths or percentages.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_NWzMWRQ\" src=https://css-tricks.com/"////codepen.io//anon//embed//NWzMWRQ?height=800&amp;theme-id=1&amp;slug-hash=NWzMWRQ&amp;default-tab=result\%22 height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed NWzMWRQ\" title=\"CodePen Embed NWzMWRQ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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-slice: [&lt;number [0,\u221e]> | &lt;percentage [0,\u221e]>]{1,4} &amp;&amp; fill?<\/code><\/pre>\n\n\n\n<ul>\n<li><strong>Initial value:<\/strong> <code>100%<\/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> relative to the size of the source image<\/li>\n\n\n\n<li><strong>Computed value:<\/strong> one to four values, each either a number or percentage; plus a <code>fill<\/code> keyword, if specified<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> by computed value<\/li>\n<\/ul>\n\n\n\n<p><code>border-image-slice<\/code> accepts between one and four values that set where the border image is sliced along each value\u2019s corresponding side.<\/p>\n\n\n\n<ul>\n<li><strong>One value:<\/strong> Sets all four sides \u2014 top, right, bottom, and left \u2014 at the same offset distance.<\/li>\n\n\n\n<li><strong>Two values:<\/strong> The first value sets the offset for the top and bottom sides; the second value sides the offset for the left and right sides.<\/li>\n\n\n\n<li><strong>Three values:<\/strong> The first value sets the offset for the top side; the second value sets the offset for the right and left sides; the third sets the offset for the bottom side.<\/li>\n\n\n\n<li><strong>Four values:<\/strong> Sets the offset for each side in clockwise order, starting from the top side \u2014 top, right, left, and bottom, respectively.<\/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\">\/* Single value *\/\n\/* Sets all four sides *\/\nborder-image-slice: 20; \nborder-image-slice: 30%;\n\n\/* Two values *\/\n\/* top and bottom | right and left *\/\nborder-image-slice: 30% 20;\nborder-image-slice: 10% 30%;\nborder-image-slice: 20% 10%;\n\n\/* Three values *\/\n\/* top | left and right | bottom *\/\nborder-image-slice: 40 31 11;\nborder-image-slice: 12 41 15;\nborder-image-slice: 10% 30% 5%;\n\n\/* Four values *\/\n\/* top | right | bottom | left *\/\nborder-image-slice: 15% 20 10% 10;\nborder-image-slice: 10 30 40 10;\nborder-image-slice: 15% 20 10% 40;\n\n\/* Optional `fill` value *\/\nborder-image-slice: 10 fill;\nborder-image-slice: 30% 20 fill;\nborder-image-slice: 40 31 11 fill;\nborder-image-slice: 10 30 40 10 fill;\n\n\/* Global values *\/\nborder-image-slice: inherit;\nborder-image-slice: initial;\nborder-image-slice: revert;\nborder-image-slice: revert-layer;\nborder-image-slice: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"number-0%25e2%2588%259e\"><code>number [0,\u221e]<\/code><\/h4>\n\n\n<p>This represents a length value in pixels from zero to infinity, if the border image is a raster image. If the border image is a vecor-based image \u2014 such as SVG \u2014 with no natural dimensions, the number is based on the vector coordinates.<\/p>\n\n\n\n<p>The following demo is an example of a raster image where the <code>border-image-slice<\/code> property is set to <code>125<\/code>, resulting in slices that are offset by <code>125px<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abKYjqq\" src=https://css-tricks.com/"////codepen.io//anon//embed//abKYjqq?height=450&amp;theme-id=1&amp;slug-hash=abKYjqq&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abKYjqq\" title=\"CodePen Embed abKYjqq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>A few things to bear in mind when working with length values:<\/p>\n\n\n\n<ul>\n<li>Negative values are not allowed.<\/li>\n\n\n\n<li>Values that are larger than the size of the image compute to <code>100%<\/code>.<\/li>\n\n\n\n<li>If the sum of the left and right sides are greater than the width of the image, then the top, bottom, and middle areas are blank as though a transparent image were used. Same goes for situations where the sum of the top and bottom values is greater than the image height \u2014 the left, right, and middle areas will be blank.<\/li>\n<\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"percentage-0%25e2%2588%259e\"><code>percentage [0,\u221e]<\/code><\/h4>\n\n\n<p>Percentages are relative to the size of the border image. For example, a <code>border-image-slice: 50%<\/code> is equal to <code>100px<\/code> when set on a <code>200px<\/code>-square image.<\/p>\n\n\n\n<p>The following demo is an example of a <code>740px<\/code> \u00d7 <code>493px<\/code> raster image where the <code>border-image-slice<\/code> property is set to <code>10%<\/code>, resulting in slices that are offset by <code>74px<\/code> (<code>740px * 10%<\/code>) along the top and bottom sides and <code>49.3px<\/code> (<code>493px * 10%<\/code>) along the left and right sides.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_PoaRrox\" src=https://css-tricks.com/"////codepen.io//anon//embed//PoaRrox?height=450&amp;theme-id=1&amp;slug-hash=PoaRrox&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed PoaRrox\" title=\"CodePen Embed PoaRrox\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"fill-optional\"><code>fill<\/code> (optional)<\/h4>\n\n\n<p>The <code>fill<\/code> value for the CSS <code>border-image-slice<\/code> acts like a background image for the middle region, filling it with the border image you provide it. It is an <strong>optional<\/strong> value that completely ignores the number constraint for the maximum number of values <code>border-image-slice<\/code> can take. This means that if all four values are set for the top, right, bottom, and left borders, we can set <code>fill<\/code> as a fifth value that fills the middle part of the element with the border image.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  \/* top | right | bottom | left | middle *\/\n  border-image-slice: 78 65 70 75 fill;\n}<\/code><\/pre>\n\n\n\n<p>And it doesn\u2019t even matter where we put <code>fill<\/code> in the declaration \u2014 any order works!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  \/* This is valid too! *\/\n  border-image-slice: 78 65 fill 70 75;\n}<\/code><\/pre>\n\n\n\n<p>In the following example, the <code>fill<\/code> keyword is used to apply the border image to the element\u2019s middle region:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyKmBGd\" src=https://css-tricks.com/"////codepen.io//anon//embed//dyKmBGd?height=450&amp;theme-id=1&amp;slug-hash=dyKmBGd&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyKmBGd\" title=\"CodePen Embed dyKmBGd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>For the <code>fill<\/code> value to work, you must first set at at least one value on the <code>border-image-slice<\/code> property. Without that, nothing is shown in the middle region.<\/p>\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-slice\" 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 border-image<\/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\n\n<h2 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks!<\/h2>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-375796\">\n\n  <time datetime=\"2018-12-28\" title=\"Originally published Dec 20, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 30, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//gradient-borders-in-css///">\n      Gradient Borders in CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-375796\">\n\n  <time datetime=\"2021-02-08\" title=\"Originally published Dec 20, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 8, 2021  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//animating-a-css-gradient-border///">\n      Animating a CSS Gradient Border    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-375796\">\n\n  <time datetime=\"2019-03-19\" title=\"Originally published Dec 20, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 19, 2019  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//stacked-borders///">\n      Stacked &#8220;Borders&#8221;    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//ericmeyer///" aria-label=\"Author page of Eric Meyer\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2019//03//O6oMcV8M_400x400.png?resize=80%2C80&amp;ssl=1\%22 width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//ericmeyer///">\n      Eric Meyer    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-375796\">\n\n  <time datetime=\"2020-03-16\" title=\"Originally published Dec 20, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 16, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-to-make-repeating-border-images///">\n      How to Make Repeating Border Images    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-375796\">\n\n  <time datetime=\"2013-04-05\" title=\"Originally published Dec 20, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 4, 2016  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//body-border-rounded-inside///">\n      Body Border, Rounded Inside    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8081b26e05bb4354f7d65ffc34cbbd67?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//chriscoyier///">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-375796\">\n\n  <time datetime=\"2020-12-03\" title=\"Originally published Dec 20, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Dec 4, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//how-to-animate-a-svg-with-border-image///">\n      How to Animate a SVG with border-image    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//urishaked///" aria-label=\"Author page of Uri Shaked\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//6e852853533bd0d89aeb28ee4d64369d?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/6e852853533bd0d89aeb28ee4d64369d?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//urishaked///">\n      Uri Shaked    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The CSS border-image-slice tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s [&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\/375796"}],"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=375796"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/375796\/revisions"}],"predecessor-version":[{"id":376315,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/375796\/revisions\/376315"}],"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=375796"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=375796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}