{"id":18777,"date":"2020-07-01T10:14:34","date_gmt":"2020-07-01T17:14:34","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=18777"},"modified":"2020-12-29T11:02:46","modified_gmt":"2020-12-29T19:02:46","slug":"border-image","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/border-image\/","title":{"rendered":"CSS Border Image"},"content":{"rendered":"\n

The border-image property in CSS is a bit tricky to wrap your mind around at first. In this article, we\u2019ll discuss what the border-image property is, how to use it and its idiosyncrasies when it comes to using it in different browsers.
<\/p>\n\n\n\n

At this point in our CSS education, we ought to know what the border property is. To refresh, it\u2019s a property that uses shorthand to specify a border around an element. It has the following structure: <\/p>\n\n\n\n

border: \n2px \t\t\t\t\t\t\t\t\/*width*\/\ndashed \t\t\t\t\t\t\t\t\/*style*\/\ngreen;\t\t\t\t\t\t\t\t\/*color*\/<\/pre><\/div>\n\n\n\n
Just like the border, the border-image property is a shorthand property that uses a source image to construct a border around an element. It has the following structure: <\/p>\n\n\n\n
border-image: \nurl("https:\/\/www.placekitten.com\/501\/700") \t\/*source*\/  \n25% \/ \t\t\t\t\t\t\t\t\t\t\/*slice*\/ \n70px \/ \t\t\t\t\t\t\t\t\t\t\/*width*\/\n2px \t\t\t\t\t\t\t\t\t\t\/*outset*\/\nstretch;\t\t\t\t\t\t\t\t\t\/*repeat*\/<\/pre><\/div>\n\n\n\n
  • border-image-source:<\/li><\/ul>\n\n\n\n
    border-image-source is the longhand property for the source portion of the border-image property in CSS. It takes either a url that has a relative path or image url to an actual image, or is some sort of gradient<\/p>\n\n\n\n
    • border-image-slice:<\/li><\/ul>\n\n\n\n
      border-image-slice property is the longhand property name for the slice portion of the border-image property. It divides the image into nine distinct sections. <\/p>\n\n\n\n
      \"image
       The border-image-slice property splits the image into nine distinct sections:  Four corners, four sides and the middle. The red lines here indicate how the image is sliced.  <\/figcaption><\/figure>\n\n\n\n
      By default, the middle is taken out so the rest of the image can surround the element you are using the property on. The border-image-slice property can use up to four numbers (in %) to dictate where the slices will be. You can also use the word fill<\/em> if you would like to use that middle section. <\/p>\n\n\n\n
      • border-image-width:<\/li><\/ul>\n\n\n\n
        Just like the border-width property, the border-image-width property indicates how wide you would like your border-image. It can use percentages or rems\/ems\/px and take up to four numbers so that each side of the border can have its own width. <\/p>\n\n\n\n
        • border-image-outset:<\/li><\/ul>\n\n\n\n
          The border-image-outset property sets how far the image border is from the element\u2019s  border box. As a reminder, the border box is part of the box model \u2013 that area between the padding and the margin. The higher the number, the further away it is from its border box. It takes up to four values so that each side has its own value if needed. <\/p>\n\n\n\n
          • border-image-repeat:<\/li><\/ul>\n\n\n\n
            The border-image-repeat property sets how each edge will behave (the edge is each side not including the corners of the image). It takes up to two values. When one value is specified, it applies to all edges and when two values are specified, the first applies to the top and bottom, while the second applies to the left and right. The value can be stretch<\/em>, repeat<\/em>, round<\/em> or space<\/em>. <\/p>\n\n\n\n
            Browser Quirks<\/h3>\n\n\n\n
            Firefox and Safari are the most common browsers that will allow you to use each individual property on its own to create a border-image. In Chrome, you can only use the shorthand property \u2013 and you have to use it in conjunction with the border-style<\/em> property that will tell us the top of the border we would like to have (solid, dashed, etc). Be sure to take a look at this if you are using Chrome and it\u2019s not working properly for you. <\/p>\n\n\n\n
            <!DOCTYPE html>\n<html lang="en">\n   <head>\n       <meta charset="UTF-8" \/>\n       <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n       <title>Border Image<\/title>\n       <style>\n           * {\n               box-sizing: border-box;\n           }\n \n           .flex {\n               display: flex;\n               align-items: center;\n               justify-content: center;\n               text-align: center;\n               width: 500px;\n               height: 300px;\n               margin: 20px;\n           }\n           .border-image-box {\n               \/* Below only works in Firefox and Safari*\/\n               border-image-source: url(http:\/\/placekitten.com\/900\/1000);\n               border-image-slice: 25%;\n               border-image-width: 70px;\n               border-image-outset: 2px;\n               border-image-repeat: round;\n               padding: 80px;\n               \/* This way will NOT work in Chrome *\/\n           }\n           .border-image-shorthand {\n               border-style: solid;\n               border-image:\n                   url(http:\/\/placekitten.com\/900\/1000)\n                   25% \/\n                   70px \/\n                   2px\n                   round;\n               padding: 80px;\n\/* Above  works in all browsers. Firefox and Safari you can use the border-image prop without using the border-style property. In Chrome you MUST use the border-style prop in order for the image to show up on the webpage *\/\n \n \n           }\n       <\/style>\n   <\/head>\n   <body>\n       <div class="border-image-box flex">\n           This is a box. It's using each of the individual border-image\n           properties to style\n       <\/div>\n       <div class="border-image-shorthand flex">\n           This is a box. It's using the border-image shorthand to style\n       <\/div>\n   <\/body>\n<\/html><\/pre><\/div>\n\n\n\n
            In this tutorial, we learned how to use the border-image property to create a CSS image border around an element. It\u2019s a shorthand property that consists of border-image-source, border-image-slice, border-image-width, border-image-outset and border-image-repeat. To make this compatible with all browsers, set a border-style to solid before you specify the border-image values. <\/p>\n","protected":false},"excerpt":{"rendered":"The border-image property in CSS is a bit tricky to wrap your mind around at first. In this article, we\u2019ll discuss what the border-image property is, how to use it and its idiosyncrasies when it comes to using it in different browsers. At this point in our CSS education, we ought to know what the…","protected":false},"author":77,"featured_media":18778,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-18777","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Border Image | Career Karma<\/title>\n<meta name=\"description\" content=\"Border-Image is new for CSS3. Here we\u2019ll cover the source, slice, width, outset and repeat properties of CSS border-image and how to use it.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/border-image\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Border Image\" \/>\n<meta property=\"og:description\" content=\"Border-Image is new for CSS3. Here we\u2019ll cover the source, slice, width, outset and repeat properties of CSS border-image and how to use it.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/border-image\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-07-01T17:14:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-12-29T19:02:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"680\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"CSS Border Image\",\"datePublished\":\"2020-07-01T17:14:34+00:00\",\"dateModified\":\"2020-12-29T19:02:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/\"},\"wordCount\":585,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/border-image\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/border-image\/\",\"name\":\"CSS Border Image | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg\",\"datePublished\":\"2020-07-01T17:14:34+00:00\",\"dateModified\":\"2020-12-29T19:02:46+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Border-Image is new for CSS3. Here we\u2019ll cover the source, slice, width, outset and repeat properties of CSS border-image and how to use it.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/border-image\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg\",\"width\":1020,\"height\":680,\"caption\":\"Neon Lights at Radio City Music Hall\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/border-image\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/careerkarma.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\/\/careerkarma.com\/blog\/css\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Border Image\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\",\"url\":\"https:\/\/careerkarma.com\/blog\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News & Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/careerkarma.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\/\/www.linkedin.com\/in\/cmvnk\"],\"url\":\"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Border Image | Career Karma","description":"Border-Image is new for CSS3. Here we\u2019ll cover the source, slice, width, outset and repeat properties of CSS border-image and how to use it.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/border-image\/","og_locale":"en_US","og_type":"article","og_title":"CSS Border Image","og_description":"Border-Image is new for CSS3. Here we\u2019ll cover the source, slice, width, outset and repeat properties of CSS border-image and how to use it.","og_url":"https:\/\/careerkarma.com\/blog\/border-image\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-07-01T17:14:34+00:00","article_modified_time":"2020-12-29T19:02:46+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/border-image\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/border-image\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"CSS Border Image","datePublished":"2020-07-01T17:14:34+00:00","dateModified":"2020-12-29T19:02:46+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/border-image\/"},"wordCount":585,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/border-image\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/border-image\/","url":"https:\/\/careerkarma.com\/blog\/border-image\/","name":"CSS Border Image | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg","datePublished":"2020-07-01T17:14:34+00:00","dateModified":"2020-12-29T19:02:46+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Border-Image is new for CSS3. Here we\u2019ll cover the source, slice, width, outset and repeat properties of CSS border-image and how to use it.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/border-image\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/border-image\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/border-image\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/07\/steve-harvey-mu2xoJHgNYA-unsplash.jpg","width":1020,"height":680,"caption":"Neon Lights at Radio City Music Hall"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/border-image\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Border Image"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News & Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18777","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=18777"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/18777\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/18778"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=18777"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=18777"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=18777"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}