{"id":334229,"date":"2021-02-09T13:38:31","date_gmt":"2021-02-09T21:38:31","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=334229"},"modified":"2022-05-20T07:53:31","modified_gmt":"2022-05-20T14:53:31","slug":"border-boundary","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-boundary\/","title":{"rendered":"border-boundary"},"content":{"rendered":"\n<p>The <code>border-boundary<\/code> property in CSS set constraints to the bounds of an element that affects how the element&#8217;s borders behave. It&#8217;s defined in the CSS Round Display Level 1 specification, which is currently in Working Draft status. That means things can change between now and formal candidate recommendation.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.element {\n  border-boundary: display; \/* sets the boundary to the screen display *\/\n}<\/code><\/pre>\n\n\n\n<p>The fact that this property lives in the CSS Round Display specification already tells you what it&#8217;s good at: creating circular interfaces. Even more specifically, <code>border-boundary<\/code> falls under the &#8220;Drawing borders around the display border&#8221; section which is yet another clue to what it does well: allowing an element&#8217;s borders to respect the round boundary of circular interfaces.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Imagine, if you will, a smart watch with a round screen. Let&#8217;s say that screen is 150px square. And in it is an orange box that&#8217;s the same dimensions.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyOpMRG\" src=\"\/\/codepen.io\/anon\/embed\/dyOpMRG?height=300&amp;theme-id=1&amp;slug-hash=dyOpMRG&amp;default-tab=result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyOpMRG\" title=\"CodePen Embed dyOpMRG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Nothing, crazy, right? The orange box conforms to the rounded display because it&#8217;s overflowing the edges, which are hidden. But look what happens when a border is added to the box&#8230;<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_RwoGaZo\" src=\"\/\/codepen.io\/anon\/embed\/RwoGaZo?height=300&amp;theme-id=1&amp;slug-hash=RwoGaZo&amp;default-tab=result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed RwoGaZo\" title=\"CodePen Embed RwoGaZo\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Hmm, not so great. Again, the edges of the box overflow the round display, so our border gets clipped in the process.<\/p>\n\n\n\n<p>That&#8217;s where <code>border-boundary<\/code> fits into the picture. Adding it to the box with a value of <code>display<\/code> allows the box&#8217;s border to follow the round shape of the display. Since the property&#8217;s browser support is exactly zilch at the moment, allow me to offer a mocked up visual of the intended result.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"420\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=1200%2C420&#038;ssl=1\" alt=\"\" class=\"wp-image-334231\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=300%2C105&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=1024%2C358&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=768%2C269&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/02\/border-boundary-mockup.jpg?resize=1000%2C350&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>See that? The border respects the display&#8217;s round shape, preventing it from getting clipped.<\/figcaption><\/figure>\n\n\n\n<p>You can imagine how useful this might be when it comes to designing for watches with interfaces. The CSS Working Group has <a href=\"https:\/\/wiki.csswg.org\/ideas\/round-display\" rel=\"noopener\">compiled a list of possible use cases<\/a> where <code>border-boundary<\/code> could really come in handy.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">border-boundary: none | parent | display;<\/code><\/pre>\n\n\n\n<ul class=\"ticss-f33ad05a is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>none<\/code><\/li><li><strong>Applies to:<\/strong> all elements<\/li><li><strong>Inherited:<\/strong> yes<\/li><li><strong>Percentages:<\/strong> n\/a<\/li><li><strong>Computed value:<\/strong> as specified<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-values\">Values<\/h3>\n\n\n<ul><li><code>none<\/code>: no boundary is set on the border.<\/li><li><code>parent<\/code>: sets the boundary where the element&#8217;s area and the border edges of its parent meet.<\/li><li><code>display<\/code>: sets the boundary where the element&#8217;s area and the border edges of the viewport meet.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-browser-support\">Browser support<\/h3>\n\n\n<p>None at the time of writing.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-further-reading\">Further reading<\/h3>\n\n\n<ul><li><a href=\"https:\/\/www.w3.org\/TR\/2016\/WD-css-round-display-1-20161222\/#propdef-border-boundary\" rel=\"noopener\">CSS Round Display Level 1 specification<\/a> (Working Draft)<\/li><li><a href=\"https:\/\/wiki.csswg.org\/ideas\/round-display\" rel=\"noopener\">Round Display Examples<\/a> (CSS Working Group Wiki)<\/li><li><a href=\"https:\/\/01.org\/chromium\/blogs\/joone\/2016\/css-round-display-specifications\" rel=\"noopener\">CSS Round Display specifications<\/a> (01.org)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The border-boundary property in CSS set constraints to the bounds of an element that affects how the element&#8217;s borders behave. It&#8217;s defined in the CSS Round Display Level 1 specification, which is currently in Working Draft status. That means things can change between now and formal candidate recommendation. The fact that this property lives in [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":0,"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":375434,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-repeat\/","url_meta":{"origin":334229,"position":0},"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":374647,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-source\/","url_meta":{"origin":334229,"position":1},"title":"border-image-source","date":"November 4, 2022","format":false,"excerpt":"The border-image-source CSS property creates borders around elements using an image file or CSS gradient as the source. .container { border-width: 2rem; border-style: dotted; border-color: grey; border-image-source: url('path\/to\/image.jpg'); border-image-repeat: repeat; border-image-slice: 100; } CodePen Embed Fallback Notice in this example that border-image-source is one of three border-image-* properties: border-image-source: Specifies\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":254226,"url":"https:\/\/css-tricks.com\/almanac\/properties\/o\/outline-offset\/","url_meta":{"origin":334229,"position":2},"title":"outline-offset","date":"May 6, 2017","format":false,"excerpt":"The outline-offset property in CSS offsets a defined outline from an element's border edge by a specified amount. An outline, which is different from a border, does not take up any space on the page (like an absolutely positioned element) so the outline can be offset in any amount and\u2026","rel":"","context":"In \"outline\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":376581,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-outset\/","url_meta":{"origin":334229,"position":3},"title":"border-image-outset","date":"January 31, 2023","format":false,"excerpt":"The CSS\u00a0border-image-outset\u00a0property sets distance between an element\u2019s\u00a0border-image\u00a0area and how far it goes beyond the element\u2019s\u00a0border-box. .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; border-image-outset: 2; } CodePen Embed Fallback The border-image-outset property is defined in the CSS Backgrounds and Borders Module Level 3 specification.\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":375796,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-slice\/","url_meta":{"origin":334229,"position":4},"title":"border-image-slice","date":"December 20, 2022","format":false,"excerpt":"The CSS border-image-slice tells the browser where to \u201cslice\u201d an image being used to create the pieces of an element\u2019s borders. .element { border-style: ridge; border-width: 3rem; border-image-source: url('path\/to\/image.jpg'); border-image-slice: 30%; border-image-repeat: repeat; } The border-image-slice property is defined in the CSS Backgrounds and Borders Module Level 3 specification. When\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":376323,"url":"https:\/\/css-tricks.com\/almanac\/properties\/b\/border-image-width\/","url_meta":{"origin":334229,"position":5},"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":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334229"}],"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\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=334229"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334229\/revisions"}],"predecessor-version":[{"id":365930,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/334229\/revisions\/365930"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13913"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334229"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334229"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}