{"id":376581,"date":"2023-01-31T06:02:00","date_gmt":"2023-01-31T14:02:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=376581"},"modified":"2023-01-31T06:02:01","modified_gmt":"2023-01-31T14:02:01","slug":"border-image-outset","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-outset\/","title":{"rendered":"border-image-outset"},"content":{"rendered":"\n<p>The CSS&nbsp;border-image-outset&nbsp;property sets distance between an element\u2019s&nbsp;<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-source\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>border-image<\/code><\/a>&nbsp;area and how far it goes beyond the element\u2019s&nbsp;border-box.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"8\"><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  border-image-outset: 2;\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_OJwygOL\" src=\"\/\/codepen.io\/anon\/embed\/OJwygOL?height=450&amp;theme-id=1&amp;slug-hash=OJwygOL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed OJwygOL\" title=\"CodePen Embed OJwygOL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The <code>border-image-outset<\/code> property is defined in the <a href=\"https:\/\/w3c.github.io\/csswg-drafts\/css-backgrounds\/#the-border-image-outset\" rel=\"noopener\">CSS Backgrounds and Borders Module Level 3 specification<\/a>. It is referred to as the \u201cEdge Overhang\u201d property, which perfectly describes what it\u2019s designed to do: allow the border image area to hang over an element\u2019s border box.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1743\" height=\"633\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_72BB6F06491261790737D0EB952A4979C03F0CE1ECD1CF6658196C5DDA901A67_1673540875839_border-image-offset-box-model.jpg?resize=1743%2C633&#038;ssl=1\" alt=\"\" class=\"wp-image-376576\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_72BB6F06491261790737D0EB952A4979C03F0CE1ECD1CF6658196C5DDA901A67_1673540875839_border-image-offset-box-model.jpg?w=1743&amp;ssl=1 1743w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_72BB6F06491261790737D0EB952A4979C03F0CE1ECD1CF6658196C5DDA901A67_1673540875839_border-image-offset-box-model.jpg?resize=300%2C109&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_72BB6F06491261790737D0EB952A4979C03F0CE1ECD1CF6658196C5DDA901A67_1673540875839_border-image-offset-box-model.jpg?resize=1024%2C372&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_72BB6F06491261790737D0EB952A4979C03F0CE1ECD1CF6658196C5DDA901A67_1673540875839_border-image-offset-box-model.jpg?resize=768%2C279&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2023\/01\/s_72BB6F06491261790737D0EB952A4979C03F0CE1ECD1CF6658196C5DDA901A67_1673540875839_border-image-offset-box-model.jpg?resize=1536%2C558&amp;ssl=1 1536w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\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-outset: [&lt;length [0,\u221e]> | &lt;number [0,\u221e]>]{1,4}<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial value:<\/strong> <code>0<\/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> four values, each a number or absolute length<\/li>\n\n\n\n<li><strong>Animation type:<\/strong> by computed value<\/li>\n<\/ul>\n\n\n\n<p><code>border-image-outset<\/code> accepts between one and four values, much like the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/m\/margin\/\"><code>margin<\/code><\/a> and <a href=\"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 outset distance.<\/li>\n\n\n\n<li><strong>Two values:<\/strong> The first value sets the outset for the top and bottom sides; the second value sets the outset for the left and right sides.<\/li>\n\n\n\n<li><strong>Three values:<\/strong> The first value sets the outset for the top side; the second value sets the outset for the right and left sides; the third sets the outset for the bottom side.<\/li>\n\n\n\n<li><strong>Four values:<\/strong> Sets the outset 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\">\/* Length value (includes unit) *\/\nborder-image-outset: 2rem;\n\n\/* Number value (unitless) *\/\nborder-image-outset: 2;\n\n\/* Single value: Sets all four sides *\/\nborder-image-outset: 2;\nborder-image-outset: 2rem;\nborder-image-outset: 32px;\n\n\/* Two values: top and bottom | left and right *\/\nborder-image-outset: 4 6rem;\nborder-image-outset: 2 3rem;\nborder-image-outset: 1 24px;\n\n\/* Three values: top | left and right | bottom *\/\nborder-image-outset: 4rem 2 5rem;\nborder-image-outset: 5 8rem 10rem;\nborder-image-outset: 3 6 9;\n\n\/* Four values: top | right | bottom | left *\/\nborder-image-outset: 15 4rem 4 10rem;\nborder-image-outset: 2 5 13rem 4;\nborder-image-outset: 2 5 3 7rem;\n\n\/* Global values *\/\nborder-image-outset: inherit;\nborder-image-outset: initial;\nborder-image-outset: revert;\nborder-image-outset: revert-layer;\nborder-image-outset: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltlength-0%25e2%2588%259egt\"><code>&lt;length<\/code> <code>[0,\u221e]&gt;<\/code><\/h4>\n\n\n<p>A length is a number with any CSS unit \u2014 like <code>10px<\/code>, <code>1.35rem<\/code>, <code>50%<\/code>, <code>25dvh<\/code>, etc \u2014 and is used to set the height and width dimensions of the image\u2019s outset.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container{\n  \/* Sets dimensions on all four sides *\/\n  border-image-outset: 2rem;\n}<\/code><\/pre>\n\n\n\n<p>The example above specifies a <code>2rem<\/code> unit length for the <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, and <code>left<\/code> outsets of the border. So, each side is <code>2rem<\/code> in length.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNrOqPe\" src=\"\/\/codepen.io\/anon\/embed\/rNrOqPe?height=450&amp;theme-id=1&amp;slug-hash=rNrOqPe&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNrOqPe\" title=\"CodePen Embed rNrOqPe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltnumber-0%25e2%2588%259egt\"><code>&lt;number [0,\u221e]&gt;<\/code><\/h4>\n\n\n<p>A number is exactly like a <code>&lt;length&gt;<\/code> value, only without a CSS unit. When we set a unitless number for the property value, that number is relative to the <code>border-width<\/code> value. The used value is equal to the <code>border-image-outset<\/code> value multiplied by the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/border\/\"><code>border-width<\/code><\/a> value.<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">border-image-outset = &lt;number> * border-width<\/code><\/pre>\n\n\n\n<p>Say we have the following style rule:<\/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-outset: 4;\n  border-width: 1rem;\n}<\/code><\/pre>\n\n\n\n<p>We multiply the <code>border-image-outset<\/code> unitless <code>&lt;number&gt;<\/code> value (<code>4<\/code>) by the <code>border-width<\/code> value (<code>1rem<\/code>), which gives us a a border image offset grand total of <code>4rem<\/code>.<\/p>\n\n\n\n<pre rel=\"\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">border-image-outset = 4 * 1rem = 4rem<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_KKBdQYK\" src=\"\/\/codepen.io\/anon\/embed\/KKBdQYK?height=450&amp;theme-id=1&amp;slug-hash=KKBdQYK&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed KKBdQYK\" title=\"CodePen Embed KKBdQYK\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"borderimageoutset-vs-borderimagewidth\"><code>border-image-outset<\/code> vs. <code>border-image-width<\/code><\/h3>\n\n\n<p>They\u2019re not the same, of course, though they behave similarly in some respects when it comes to their values. For example, both properties accept <code>&lt;length&gt;<\/code> and <code>&lt;number&gt;<\/code> values, and up to four values in a single declaration.<\/p>\n\n\n\n<p>However, the differences between the two properties are evident in the way each property uniquely affects a part of the border image. <code>border-image-width<\/code> affects the the physical dimension of the border image area. <code>border-image-outset<\/code> affects the distance <em>between<\/em> the border image and the content box, allowing the border image to extend beyond the border box.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"a-few-things-to-keep-in-mind\">A few things to keep in mind<\/h3>\n\n\n<p>A few more things about the <code>border-image-outset<\/code> property worth knowing:<\/p>\n\n\n\n<ul>\n<li>It\u2019s essential to set the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/box-sizing\/\"><code>box-sizing<\/code><\/a> of elements to <code>border-box<\/code>, i.e., <code>* { box-sizing: border-box; }<\/code>. This prevents borders and padding from <a href=\"https:\/\/css-tricks.com\/international-box-sizing-awareness-day\/\">adding to the physical width of the element<\/a> and the element appearing larger than it should.<\/li>\n\n\n\n<li>Negative values are <strong>not allowed<\/strong>.<\/li>\n\n\n\n<li>A <code>border-image<\/code> that renders outside the border box does <em>not<\/em> trigger scrolling. Overflowing portions are invisible to mouse events and do not capture events.<\/li>\n\n\n\n<li>Even though they never cause a scrolling mechanism, outset images may still be clipped by an ancestor element or by the viewport.<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>Change the <code>border-image-outset<\/code>, <code>border-image-width<\/code>, and <code>border-width<\/code> values below 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_mdjweJv\" src=\"\/\/codepen.io\/anon\/embed\/mdjweJv?height=850&amp;theme-id=1&amp;slug-hash=mdjweJv&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdjweJv\" title=\"CodePen Embed mdjweJv\" 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:\/\/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-outset\" 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:\/\/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\/understanding-border-image\/\">Understanding <code>border-image<\/code><\/a> (CSS-Tricks)<\/li>\n\n\n\n<li><a href=\"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\" 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&nbsp;border-image-outset&nbsp;property sets distance between an element\u2019s&nbsp;border-image&nbsp;area and how far it goes beyond the element\u2019s&nbsp;border-box.<\/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":{"_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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":355486,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask-border\/","url_meta":{"origin":376581,"position":0},"title":"mask-border","date":"November 3, 2021","format":false,"excerpt":"The mask-border CSS property sets a border image to an element\u2019s masked border area. It is s shorthand for setting the mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat, and mask-border-mode properties in a single declaration.","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/s_A4675D262DA10437B039C41DDD674601F72A8FFCAB2801EE4264E0D51AB8C554_1634664377390_slice.png?fit=1000%2C1000&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":376323,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","url_meta":{"origin":376581,"position":1},"title":"border-image-width","date":"January 12, 2023","format":false,"excerpt":"The CSS border-image-width property is used to determine the width of the border\u2019s image file, as provided by the CSS border-image-source property. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-width: 40%; border-image-repeat: repeat; } CodePen Embed Fallback The border-image-width property is defined in the CSS Backgrounds and\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375434,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-repeat\/","url_meta":{"origin":376581,"position":2},"title":"border-image-repeat","date":"December 6, 2022","format":false,"excerpt":"The CSS border-image-repeat 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 border-image-slice is set to fill. .container { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 70; border-image-repeat: repeat; } CodePen Embed\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":350993,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-inline\/","url_meta":{"origin":376581,"position":3},"title":"border-inline","date":"September 2, 2021","format":false,"excerpt":"border-inline is a CSS logical shorthand property that combines border-inline-color, border-inline-style, and border-inline-width into a single declaration, styling an element's borders in the inline (left and right) direction. .element { border-inline: 5px solid red; writing-mode: horizontal-tb; } border-inline is the logical equivalent to physical properties including border-left and border-right (or\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":343405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/m\/mask\/","url_meta":{"origin":376581,"position":4},"title":"mask","date":"July 2, 2021","format":false,"excerpt":"The mask property is a shorthand to specify all mask-* properties. mask can hide part of the element is applied to and It accepts one or more comma-separated values, where each value corresponds to a mask layer. .element { mask: url(mask.png) right bottom \/ 100px repeat-y; } mask is included\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/11\/drama-masks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":19812,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image\/","url_meta":{"origin":376581,"position":5},"title":"border-image","date":"January 9, 2013","format":false,"excerpt":"border-image is a shorthand property that lets you use an image or CSS gradient as the border of an element. The border-image property can be applied to any element, except internal table elements (e.g. tr, th, td) when border-collapse is set to collapse. .element { border-image: url(border.png) 25 25 round;\u2026","rel":"","context":"With 19 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376581"}],"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=376581"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376581\/revisions"}],"predecessor-version":[{"id":376592,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/376581\/revisions\/376592"}],"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=376581"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}