{"id":374647,"date":"2022-11-04T06:05:06","date_gmt":"2022-11-04T13:05:06","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=374647"},"modified":"2022-11-17T07:33:45","modified_gmt":"2022-11-17T15:33:45","slug":"border-image-source","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-source\/","title":{"rendered":"border-image-source"},"content":{"rendered":"\n<p>The <code>border-image-source<\/code> CSS property creates borders around elements using an image file or CSS gradient as the source.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">.container {\n  border-width: 2rem;\n  border-style: dotted;\n  border-color: grey;\n  border-image-source: url('path\/to\/image.jpg');\n  border-image-repeat: repeat;\n  border-image-slice: 100;\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_LYmoyJq\" src=https://css-tricks.com/"////codepen.io//anon//embed//LYmoyJq?height=450&amp;theme-id=1&amp;slug-hash=LYmoyJq&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYmoyJq\" title=\"CodePen Embed LYmoyJq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Notice in this example that <code>border-image-source<\/code> is one of three <code>border-image-*<\/code> properties:<\/p>\n\n\n\n<ul><li><code>border-image-source<\/code>: Specifies the image file or gradient used for the border.<\/li><li><code>border-image-repeat<\/code>: Specifies whether to repeat the image when drawing the border or to display it once.<\/li><li><code>border-image-slice<\/code>: Splits the border image into regions used for spacing and sizing the image.<\/li><\/ul>\n\n\n\n<p>The <code>border-image-source<\/code> property is defined in the <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-backgrounds-3//#background-image\" 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-markup\" data-line=\"\"><code markup=\"tt\">border-image-source = none | &lt;image>;  \nwhere\n  &lt;image> = &lt;url> | &lt;gradient> <\/code><\/pre>\n\n\n\n<p>\u2026where <code>&lt;image&gt;<\/code> can be expressed as a URL that points to an image file, or a <a href=https://css-tricks.com/"https:////css-tricks.com//a-complete-guide-to-css-gradients///">CSS gradient<\/a>.<\/p>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>none<\/code><\/li><li><strong>Applies to:<\/strong> All elements, except internal table elements when <code>border-collapse<\/code> is collapse<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value<\/strong>: <code>none<\/code> or the computed <code>&lt;image&gt;<\/code><\/li><li><strong>Percentages<\/strong>: N\/A<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/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-source: none;\nborder-image-source: &lt;image>;\n\n\/* &lt;image> values *\/\nborder-image-source: url('image.png');\nborder-image-source: url('svg-file.svg');\nborder-image-source: &lt;gradient>;\n\n\/* &lt;gradient> values *\/\nborder-image-source: linear-gradient(to bottom left, lightblue, #00000);\nborder-image-source: repeating-linear-gradient(15deg, #900000, #ee2400, #ffb09c 2rem );\nborder-image-source: radial-gradient(to top right, #7AD7F0, #92DFF3 0.5rem, #F5FCFF);\nborder-image-source: repeating-radial-gradient(to right, #B7E9F7, #DBF3FA);\nborder-image-source: conic-gradient(#FFFEE9, #FFFBC8, #FFF59E, #FFF157);\n\n\/* Global values *\/\nborder-image-source: inherit;\nborder-image-source: initial;\nborder-image-source: revert;\nborder-image-source: revert-layer;\nborder-image-source: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"none\"><code>none<\/code><\/h4>\n\n\n<p>This is the default value for the <code>border-image-source<\/code> CSS property. It indicates that there will be no image or gradient color set on the selected element.<\/p>\n\n\n\n<p>The <code>&lt;gradient&gt;<\/code> syntax allows you to set a group of colors and have them overlap. It represents 5 gradient functions which are:<\/p>\n\n\n\n<ul><li><code>linear-gradient()<\/code><\/li><li><code>radial-gradient()<\/code><\/li><li><code>conic-gradient()<\/code><\/li><li><code>repeating-linear-gradient()<\/code><\/li><li><code>repeating-radial-gradient()<\/code><\/li><\/ul>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltimagegt-as-url\"><code>&lt;image&gt;<\/code> as <code>url()<\/code><\/h4>\n\n\n<p><code>&lt;image&gt;<\/code> accepts the <code>url()<\/code> function with its valid inputs including an image with a valid extension, an svg, or an external link to the image. It\u2019s basically the same way <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//b//background-image///"><code>background-image<\/code><\/a> accepts the <code>url()<\/code> function and displays the image file it targets. The example below creates a border from a JPG image file provided in the <code>url()<\/code> function:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"2\"><code markup=\"tt\">.container {\n  border-image-source: url(\"path\/to\/image.jpg\");\n  border-image-repeat: repeat;\n  border-image-slice: 150 75;\n  \/* etc *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWrRzGY\" src=https://css-tricks.com/"////codepen.io//anon//embed//QWrRzGY?height=450&amp;theme-id=1&amp;slug-hash=QWrRzGY&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWrRzGY\" title=\"CodePen Embed QWrRzGY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltimagegt-as-ltgradientgt\"><code>&lt;image&gt;<\/code> as <code>&lt;gradient&gt;<\/code><\/h4>\n\n\n<p>The <code>&lt;image&gt;<\/code> value can also be expressed as a CSS <code>&lt;gradient&gt;<\/code>. Gradients are merely images drawn by the browser, which is why they are considered a valid <code>&lt;image&gt;<\/code> value. And any type of CSS gradient is supported:<\/p>\n\n\n\n<ul><li><code>linear-gradient()<\/code><\/li><li><code>radial-gradient()<\/code><\/li><li><code>conic-gradient()<\/code><\/li><li><code>repeating-linear-gradient()<\/code><\/li><li><code>repeating-radial-gradient()<\/code><\/li><\/ul>\n\n\n\n<p>We set it the same way we would set as if it was set using the <code>background-image<\/code> property:<\/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-source: repeating-linear-gradient(\n    15deg,\n    #900000,\n    #ee2400,\n    #ffb09c 2rem\n  );\n  border-image-repeat: repeat;\n  border-image-slice: 100 75;\n  \/* etc *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOzJxQZ\" src=https://css-tricks.com/"////codepen.io//anon//embed//gOzJxQZ?height=450&amp;theme-id=1&amp;slug-hash=gOzJxQZ&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOzJxQZ\" title=\"CodePen Embed gOzJxQZ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Oh, you want to animate the gradient? Sure! It does require using a custom CSS <code>@property<\/code> \u2014 which is only supported in Chrome at the time of this writing \u2014 but it\u2019s totally possibly to, say, rotate the angle of the gradient:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWrRYGy\" src=https://css-tricks.com/"////codepen.io//anon//embed//QWrRYGy?height=450&amp;theme-id=1&amp;slug-hash=QWrRYGy&amp;default-tab=css,result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWrRYGy\" title=\"CodePen Embed QWrRYGy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">Learn more about using <code>@property<\/code> in <a href=https://css-tricks.com/"https:////css-tricks.com//interpolating-numeric-css-variables///">\u201cInterpolating Numeric CSS Variables\u201d<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"border-images-can-be-svg\">Border images can be SVG<\/h3>\n\n\n<p>Other than images with a valid image extension, <code>svg<\/code> files can also be used as borders. Link up the SVG file as you normally would in the <code>url()<\/code> function:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  border-width: 3rem;\n  border-style: solid;\n  border-image-source: url(\"path\/to\/image.svg\");\n  \/* etc. *\/\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_VwxOWeY\" src=https://css-tricks.com/"////codepen.io//anon//embed//VwxOWeY?height=450&amp;theme-id=1&amp;slug-hash=VwxOWeY&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed VwxOWeY\" title=\"CodePen Embed VwxOWeY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Encoded SVG also works if that\u2019s how you prefer to roll:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_qBYGXGp\" src=https://css-tricks.com/"////codepen.io//anon//embed//qBYGXGp?height=550&amp;theme-id=1&amp;slug-hash=qBYGXGp&amp;default-tab=css,result\%22 height=\"550\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed qBYGXGp\" title=\"CodePen Embed qBYGXGp\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you want to get <em>super<\/em> tricky with SVG as a border image, give <a href=https://css-tricks.com/"https:////css-tricks.com//creative-background-patterns-using-gradients-css-shapes-and-even-emojis///">\u201cCreative Background Patterns Using Gradients, CSS Shapes, and Even Emojis\u201d<\/a> by Preethi a read. The examples in there use the <code>background-image<\/code> property, but they work with <code>border-image-source<\/code> as well.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"border-radius-is-a-nogo\">Border radius is a no-go<\/h3>\n\n\n<p>The short story is that the <code>border-image-source<\/code> property does not work with the <code>border-radius<\/code> property. You can set <code>border-radius<\/code> on the same element, but the corners of the border image will maintain its sharp edges.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxjNPwe\" src=https://css-tricks.com/"////codepen.io//anon//embed//xxjNPwe?height=450&amp;theme-id=1&amp;slug-hash=xxjNPwe&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxjNPwe\" title=\"CodePen Embed xxjNPwe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>If you really need those rounded corners, then you might consider using a <code>background-image<\/code> on the element\u2019s <code>::before<\/code> pseudo-element and applying <code>border-radius<\/code> on it instead.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_vYjweVo\" src=https://css-tricks.com/"////codepen.io//anon//embed//vYjweVo?height=450&amp;theme-id=1&amp;slug-hash=vYjweVo&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed vYjweVo\" title=\"CodePen Embed vYjweVo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Here\u2019s the longer story. During my research, The following example uses the <code>border-image-source<\/code> property to create a <code>repeating-linear-gradient<\/code> border with a <code>border-radius<\/code> set to <code>50%<\/code>. Notice how the corners remain sharp even though DevTools shows a <code>border-radius<\/code> declaration:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1365\" height=\"627\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335680520_Screenshot786.png?resize=1365%2C627&amp;ssl=1\%22 alt=\"A blockquote with a grdient border-image-source and DevTools open next to it.\" class=\"wp-image-374637\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335680520_Screenshot786.png?w=1365&amp;ssl=1 1365w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335680520_Screenshot786.png?resize=300%2C138&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335680520_Screenshot786.png?resize=1024%2C470&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335680520_Screenshot786.png?resize=768%2C353&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Here\u2019s how it looks without <code>border-image-source<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1365\" height=\"624\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335814889_Screenshot787.png?resize=1365%2C624&amp;ssl=1\%22 alt=\"Blockquote with a rounded, beveled border in gray and black.\" class=\"wp-image-374639\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335814889_Screenshot787.png?w=1365&amp;ssl=1 1365w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335814889_Screenshot787.png?resize=300%2C137&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335814889_Screenshot787.png?resize=1024%2C468&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_86EC903BB51DE12E4A477D1C222C79EDCF53DBE5A5B1C2CEE9E73757E858FCF4_1665335814889_Screenshot787.png?resize=768%2C351&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p><a href=https://css-tricks.com/"https:////github.com//w3c//csswg-drafts//issues//7550/" rel=\"noopener\">An issue has been opened<\/a> in the specification\u2019s repo, but there\u2019s no indication of when, or if, it will be resolved at the time of this writing.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"performance\">Performance<\/h3>\n\n\n<p>Take note when using images or external urls to your images in the <code>border-image-source<\/code> without taking measures to reduce their size before use because loading heavy images greatly increases the overall page size which results in a slower website. It&#8217;s always worth <a href=https://css-tricks.com/"https:////css-tricks.com//maximally-optimizing-image-loading-for-the-web-in-2021///">optimizing your images<\/a> before calling them with the <code>url()<\/code> function and leaning toward <a href=https://css-tricks.com/"https:////css-tricks.com//useful-tools-for-creating-avif-images///">modern image formats<\/a> that tend to be lighter.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QWrJEGb\" src=https://css-tricks.com/"////codepen.io//anon//embed//QWrJEGb?height=650&amp;theme-id=1&amp;slug-hash=QWrJEGb&amp;default-tab=result\%22 height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QWrJEGb\" title=\"CodePen Embed QWrJEGb\" 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-source\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n\n<p>Support looks good across all major browsers. It\u2019s also great to set your <code>border-color<\/code> in case your image fails to load or the resource is unable to load due to server issues:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">section {\n  border-color: grey; \/* fallback color *\/\n  border-width: 2rem;\n  border-image-source: url(\"image.png\");\n}<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////www.w3.org//TR//css-backgrounds-3//#background-image\" rel=\"noopener\">CSS Backgrounds and Borders Module Level 3<\/a> (W3C specification)<\/li><li><code><a href=https://css-tricks.com/"https:////developer.mozilla.org//en-US//docs//Web//CSS//border-image-source/" rel=\"noopener\">border-image-source<\/a><\/code> (MDN)<\/li><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><\/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 advanced\" id=\"mini-post-374647\">\n\n  <time datetime=\"2010-07-21\" title=\"Originally published Nov 4, 2022\">\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-374647\">\n\n  <time datetime=\"2008-03-20\" title=\"Originally published Nov 4, 2022\">\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<article class=\"in-article-card articles\" id=\"mini-post-374647\">\n\n  <time datetime=\"2020-03-16\" title=\"Originally published Nov 4, 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-374647\">\n\n  <time datetime=\"2018-12-28\" title=\"Originally published Nov 4, 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-374647\">\n\n  <time datetime=\"2021-02-08\" title=\"Originally published Nov 4, 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-374647\">\n\n  <time datetime=\"2019-03-19\" title=\"Originally published Nov 4, 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    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>The border-image-source CSS property creates borders around elements using an image file or CSS gradient as the source.<\/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\/374647"}],"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=374647"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/374647\/revisions"}],"predecessor-version":[{"id":375443,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/374647\/revisions\/375443"}],"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=374647"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}