{"id":376323,"date":"2023-01-12T05:47:02","date_gmt":"2023-01-12T13:47:02","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=376323"},"modified":"2023-01-18T13:25:47","modified_gmt":"2023-01-18T21:25:47","slug":"border-image-width","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","title":{"rendered":"border-image-width"},"content":{"rendered":"\n<p>The CSS <code>border-image-width<\/code> property is used to determine the width of the border\u2019s image file, as provided by the CSS <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//border-image-source///">border-image-source<\/a><\/code> property.<\/p>\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-width: 40%;\n  border-image-repeat: repeat; \n}<\/code><\/pre>\n\n\n\n<!--more-->\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaVxPga\" src=https://css-tricks.com/"////codepen.io//anon//embed//BaVxPga?height=450&amp;theme-id=1&amp;slug-hash=BaVxPga&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaVxPga\" title=\"CodePen Embed BaVxPga\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>border-image-width<\/code> property is defined in the <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-backgrounds-3//#border-image-width\" rel=\"noopener\">CSS Backgrounds and Borders Module Level 3 specification<\/a>. It\u2019s function is described as \u201cdrawing areas\u201d which is an apt description of how the property draws an area along the outer edge of the element to reserve space for the border image.<\/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-markup\" data-line=\"\"><code markup=\"tt\">border-image-width: [&lt;length-percentage [0,\u221e]> | &lt;number [0,\u221e]> | auto ]{1,4}<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial value:<\/strong> 1<\/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 width\/height of the border image area<\/li>\n\n\n\n<li><strong>Computed value:<\/strong> four values, each either a number, the keyword <code>auto<\/code>, or a computed <code>&lt;length-percentage&gt;<\/code> value<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> by computed value<\/li>\n<\/ul>\n\n\n\n<p><code>border-image-width<\/code> accepts between one and four values, much like the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//m//margin///"><code>margin<\/code><\/a> and <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//p//padding///"><code>padding<\/code><\/a> shorthand properties:<\/p>\n\n\n\n<ul>\n<li><strong>One value:<\/strong> Sets all four sides 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 sets 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 (top, right, bottom, and left, in that order)<\/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 value *\/\nborder-image-width: auto;\n\n\/* Single value *\/\n\/* Sets all four sides *\/\nborder-image-width: 20%;\nborder-image-width: 2rem;\nborder-image-width: auto;\n\n\/* Two values *\/\n\/* top and bottom | left and right *\/\nborder-image-width: 4rem 10%;\nborder-image-width: auto 3rem;\nborder-image-width: 2 2rem;\n\n\/* Three values *\/\n\/* top | left and right | bottom *\/\nborder-image-width: 10% 40% 4;\nborder-image-width: 5 auto 10;\nborder-image-width: 30% 60% auto;\n\n\/* Four values *\/\n\/* top | right | bottom | left *\/\nborder-image-width: 20 3rem 40% auto;\nborder-image-width: 2 10rem 10% 40%;\nborder-image-width: 40 auto 20% auto;\n\n\/* Global values *\/\nborder-image-width: inherit;\nborder-image-width: initial;\nborder-image-width: revert;\nborder-image-width: revert-layer;\nborder-image-width: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltlengthpercentage-0%25e2%2588%259egt\"><code>&lt;length-percentage [0,\u221e]&gt;<\/code><\/h4>\n\n\n<p>The <code>&lt;length-percentage&gt;<\/code> value specifies either a length or a percentage value that can be set on the CSS <code>border-image-width<\/code> property to specify the width and height of the image on the border.<\/p>\n\n\n\n<p>The <a href=https://css-tricks.com/"https:////css-tricks.com//the-lengths-of-css///">length<\/a> value specifies the width and height dimensions of the image in CSS units:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container{\n  \/* top and bottom | left and right *\/\n  border-image-width: 4rem 4.5rem;\n}<\/code><\/pre>\n\n\n\n<p>The example above specifies a <code>4rem<\/code> unit length for the <code>top<\/code> and <code>bottom<\/code> offsets of the border, and a <code>4.5rem<\/code> unit length for the <code>left<\/code> and <code>right<\/code> offsets of the border.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_JjZVoEx\" src=https://css-tricks.com/"////codepen.io//anon//embed//JjZVoEx?height=450&amp;theme-id=1&amp;slug-hash=JjZVoEx&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed JjZVoEx\" title=\"CodePen Embed JjZVoEx\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The percentage value expresses the border image\u2019s width and height dimensions as a percentage:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  border-image-width: 20%;\n}<\/code><\/pre>\n\n\n\n<p>It works just like the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//border-image-slice///">border-image-slice<\/a><\/code> property\u2019s percentage value where the percentages are relative to the size of the image. For example, the dimensions for the GIF used in the demo below are <code>498px<\/code>\u00d7<code>280px<\/code>. When we set the <code>border-image-width<\/code> value to <code>20%<\/code>, the computed width which is <code>99.6px<\/code> (<code>498px * 20%<\/code>) along the top and bottom, and of the height <code>56px<\/code> (<code>280px * 20%<\/code>) along the right and left sides of the border.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYKqyxR\" src=https://css-tricks.com/"////codepen.io//anon//embed//eYKqyxR?height=450&amp;theme-id=1&amp;slug-hash=eYKqyxR&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYKqyxR\" title=\"CodePen Embed eYKqyxR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"number-0%25e2%2588%259e\"><code>number [0,\u221e]<\/code><\/h4>\n\n\n<p>When a unitless, non-negative integer is used as the <code>border-image-width<\/code> value, it represents a multiple of the element\u2019s <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//border///"><code>border-width<\/code><\/a> value. Consider the following:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  border-image-width: 2;\n  border-width: 2rem;\n}<\/code><\/pre>\n\n\n\n<p>Here, the <code>border-image-width<\/code> value (<code>2<\/code>) is multiplied by the <code>border-width<\/code> value (<code>2rem<\/code>) to calculate the used width (<code>4rem<\/code>) of the border image.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_oNyKqxb\" src=https://css-tricks.com/"////codepen.io//anon//embed//oNyKqxb?height=450&amp;theme-id=1&amp;slug-hash=oNyKqxb&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed oNyKqxb\" title=\"CodePen Embed oNyKqxb\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Note, too, that <code>border-image-width<\/code> draws its border from the element\u2019s border box, according to the <a href=https://css-tricks.com/"https:////css-tricks.com//the-css-box-model///">CSS Box Model<\/a>. And when it draws the area, it starts from the border box and works inward.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//12//s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106680683_border-image-widthinnerincreaseillustration.png?resize=662%2C347&amp;ssl=1\%22 alt=\"Rectangle with four arrows in each corner pointing inward towards the center.\" class=\"wp-image-376324\" width=\"662\" height=\"347\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106680683_border-image-widthinnerincreaseillustration.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106680683_border-image-widthinnerincreaseillustration.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106680683_border-image-widthinnerincreaseillustration.png?resize=1024%2C538&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106680683_border-image-widthinnerincreaseillustration.png?resize=768%2C403&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\"><code>border-image-width<\/code>&nbsp;is sized from the outside edge of the element toward the inside of the element.<\/figcaption><\/figure>\n\n\n\n<p>It is entirely different from how <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//border///"><code>border-width<\/code><\/a> works, which enlarges the container\u2019s border box, increasing the element\u2019s overall size dimensions.<\/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//12//s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106796969_border-image-widthincreaseillustration.png?resize=1200%2C630&amp;ssl=1\%22 alt=\"Rectangle with four arrows in each corner pointing outward, away from the center.\" class=\"wp-image-376325\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106796969_border-image-widthincreaseillustration.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106796969_border-image-widthincreaseillustration.png?resize=300%2C158&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106796969_border-image-widthincreaseillustration.png?resize=1024%2C538&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/s_7342C0FB88822FD8A7163B39667343AE1BC45968FCF6F641EB755EFCC4E1CF94_1671106796969_border-image-widthincreaseillustration.png?resize=768%2C403&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\"><code>border-width<\/code> is sized from the outside edge of the element beyond the element\u2019s border-box.<\/figcaption><\/figure>\n\n\n\n<p>In other words, <code>border-image-width<\/code> enlarges the image width without affecting the element\u2019s overall size.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"auto\"><code>auto<\/code><\/h4>\n\n\n<p>Using the <code>auto<\/code> keyword is based by either the natural (not specified) size of the image provided by <code>border-image-source<\/code> or the element\u2019s <code>border-width<\/code> value.<\/p>\n\n\n\n<p>How does it choose which to use? If the image has a natural (or \u201cintrinsic\u201d) size, that\u2019s the value. For example, if the image is <code>200px<\/code> square, then <code>200px<\/code> is the applied value. If there is no natural size, say an SVG without width or height attributes, then the <code>border-width<\/code> value is used instead.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_WNKNRZX\" src=https://css-tricks.com/"////codepen.io//anon//embed//WNKNRZX?height=450&amp;theme-id=1&amp;slug-hash=WNKNRZX&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed WNKNRZX\" title=\"CodePen Embed WNKNRZX\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>And what if there is no <code>border-width<\/code> on the element? The initial style of <code>border-width<\/code> is <code>none<\/code> which results in a width of zero.<\/p>\n\n\n\n<p class=\"is-style-explanation\">By \u201cnatural size\u201d we mean the image\u2019s full width and height dimensions. Like, if we drop an <code>&lt;img&gt;<\/code> on a page and it is <code>500px<\/code> square, that\u2019s the natural size. That\u2019s different than size of the image in its context. For example, if we set that same image with <code>&lt;img width=\"200\"&gt;<\/code> the natural size is still <code>500px<\/code> square even though renders at <code>200px<\/code> on the screen.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"overlapping-borders\">Overlapping borders<\/h3>\n\n\n<p>Let\u2019s say we have a border image with a natural size of <code>500px<\/code> square:<\/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(\"\/image-500px.webp\");\n}<\/code><\/pre>\n\n\n\n<p>Now let\u2019s say we set <code>border-image-width<\/code> to a value that exceeds the image dimensions:<\/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(\"\/image-500px.webp\");\n  border-image-width: 2; \/* 400px = 200px * 2 *\/\n  border-width: 200px;\n}<\/code><\/pre>\n\n\n\n<p>The borders would overlap in this sort of situation since the offsets combine to <code>800px<\/code> in the width and height dimensions. However, the property is \u201csmart\u201d in that it reduces the applied <code>border-image-width<\/code> value of each side proportionally until the borders no longer overlap. In this case, the value needs to be reduced by <code>100px<\/code> per offset to fit the image\u2019s natural dimensions.<\/p>\n\n\n\n<p>The <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-backgrounds-3//#border-image-width\" rel=\"noopener\">spec<\/a> provides the formula the browser uses to figure that out:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">f = min(Lwidth\/(Wleft + Wright), Lheight\/(Wtop + Wbottom))<\/code><\/pre>\n\n\n\n<p>Where:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">Lwidth = width of the border image area (`border-width`)\nLheight = height of the border image area\nWleft = Left offset of the border image width\nWright = Right offset of the border image width\nWtop = Top offset of the border image width\nWbottom = Bottom offset of the border image width<\/code><\/pre>\n\n\n\n<p>After we\u2019ve calculated <code>f<\/code>, we check if <code>f<\/code> &lt; 1, and if it is, we multiply the offset values (<code>Wleft<\/code>, <code>Wright<\/code>, <code>Wtop<\/code>, <code>Wbottom<\/code> ) by <code>f<\/code> to reduce it.<\/p>\n\n\n\n<p>Substituting our values from the example above into our equation, we have:<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">f = min(200px\/(400px + 400px), 500px\/(400px + 400px)) = 0.25<\/code><\/pre>\n\n\n\n<p>Since <code>f<\/code> is less than <code>1<\/code>, we multiply all the offsets by <code>0.25<\/code> resulting in the new offset value, <code>100px<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>Change the values below for the <code>border-image-width<\/code> and <code>border-width<\/code> to see how each input affects the image size.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGjGBBG\" src=https://css-tricks.com/"////codepen.io//anon//embed//bGjGBBG?height=750&amp;theme-id=1&amp;slug-hash=bGjGBBG&amp;default-tab=result\%22 height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGjGBBG\" title=\"CodePen Embed bGjGBBG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\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-width\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\">\n<\/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<h3 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks!<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card articles\" id=\"mini-post-376323\">\n\n  <time datetime=\"2020-12-03\" title=\"Originally published Jan 12, 2023\">\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<article class=\"in-article-card articles\" id=\"mini-post-376323\">\n\n  <time datetime=\"2020-03-16\" title=\"Originally published Jan 12, 2023\">\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 notes\" id=\"mini-post-376323\">\n\n  <time datetime=\"2016-09-06\" title=\"Originally published Jan 12, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 6, 2016  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//slicing-svg-9-ways///">\n      Slicing SVG 9 Ways    <\/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 advanced\" id=\"mini-post-376323\">\n\n  <time datetime=\"2010-07-21\" title=\"Originally published Jan 12, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 2, 2020  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//understanding-border-image///">\n      Understanding\u00a0border-image    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//norabrown///" aria-label=\"Author page of Nora Brown\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//d02a6a377afe51cfe0155e3da6fbaa64?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/d02a6a377afe51cfe0155e3da6fbaa64?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//norabrown///">\n      Nora Brown    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-376323\">\n\n  <time datetime=\"2008-03-20\" title=\"Originally published Jan 12, 2023\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Apr 13, 2017  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//using-css-for-image-borders///">\n      Using CSS for Image Borders    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//volkangorgulu///" aria-label=\"Author page of Volkan G\u00f6rg\u00fcl\u00fc\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//8ec0d4eda20ee8830cc8f8109da4073a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8ec0d4eda20ee8830cc8f8109da4073a?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//volkangorgulu///">\n      Volkan G\u00f6rg\u00fcl\u00fc    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The CSS border-image-width property is used to determine the width of the border\u2019s image file, as provided by the CSS [&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\/376323"}],"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=376323"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376323\/revisions"}],"predecessor-version":[{"id":376526,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376323\/revisions\/376526"}],"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=376323"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}