{"id":14822,"date":"2020-04-17T20:20:12","date_gmt":"2020-04-18T03:20:12","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14822"},"modified":"2023-12-01T02:41:27","modified_gmt":"2023-12-01T10:41:27","slug":"css-outline","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-outline\/","title":{"rendered":"CSS Outline"},"content":{"rendered":"\n

When you\u2019re designing a web element, you may decide that you want an outline to appear around the element on the page. For instance, if you are designing a box that you want to highlight, you may want to add a colored outline around the box to draw attention to the element.<\/p>\n\n\n\n

That\u2019s where the CSS outline property comes in. The outline property allows you to add a line outside the borders of an element to make the element stand out on the web page.<\/p>\n\n\n\n

This tutorial will discuss, with examples, the basics of outlines and how to use the CSS outline property to draw a line outside the borders of a web element. By the end of reading this tutorial, you\u2019ll be an expert at drawing outlines using the CSS outline property.
<\/p>\n\n\n\n

CSS Outline<\/h2>\n\n\n\n

An outline is a line drawn around an element, outside of its border. The most common use case of the outline property is to highlight an HTML element.
<\/p>\n\n\n\n

Here is a graphic representation of how outlines are applied in CSS:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

This graphic demonstrates that outlines appear both outside the content and border of a web element. You can see that the outline is the outermost layer of a web element.
<\/p>\n\n\n\n

There are a few differences between a border and an outline in CSS.
<\/p>\n\n\n\n

First, as we discussed, the outline is drawn outside of the element (unlike a border). This means that the outline we declare may overlap other content on a web page. However, outlines do not take up any space, and so they do not have any impact on surrounding elements aside from being able to overlap an element.
<\/p>\n\n\n\n

In addition, the outline is not part of an element\u2019s dimensions. This means that the outline you specify will have no effect on the height and the width values of an element.
<\/p>\n\n\n\n

Outlines, unlike borders, also cannot have a different border width, color, or style for each edge. So, the outline you specify around an element will appear consistent across all edges.
<\/p>\n\n\n\n

If you\u2019re looking to learn more about borders in CSS, read our guide to CSS borders<\/a>. <\/p>\n\n\n\n

CSS Outline Property<\/h2>\n\n\n\n

The outline property is used to add an outline to an element on a web page. 
<\/p>\n\n\n\n

The outline property is shorthand for four sub-properties which allow you to customize how an outline appears on a web page. These sub-properties are:
<\/p>\n\n\n\n

    \n
  • outline-color: Sets the color of the outline<\/li>\n\n\n\n
  • outline-style: Sets the style of the outline<\/li>\n\n\n\n
  • outline-width: Sets the width of the outline<\/li>\n<\/ul>\n\n\n\n

    The syntax for the outline property is as follows:<\/p>\n\n\n\n

    outline: outline-color outline-style outline-width;<\/pre><\/div>\n\n\n\n
    The values specified with the outline property do not need to appear in any particular order.
    <\/p>\n\n\n\n
    Let\u2019s walk through an example to illustrate how the outline property works. Suppose we want to create an outline around a box that contains the text This is a box<\/code>. Our outline should have the following characteristics:
    <\/p>\n\n\n\n
      \n
    • The outline should be red.<\/li>\n\n\n\n
    • The outline should be 3px thick.<\/li>\n\n\n\n
    • The outline should be dotted.<\/li>\n<\/ul>\n\n\n\n
      We also want our outline to have a 1px-thick black border. We could create this outline and border using the following code:
      <\/p>\n\n\n\n
      <html>\n<p class=\"outlineExample\">This is a box.<\/p>\n<\/html>\n<style>\n\t\n.outlineExample {\n\twidth: 100px;\n\tborder: black solid 1px;\n\toutline: red dotted 3px;\n}\n<\/style><\/pre><\/div>\n\n\n\n
      Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
      In our code, we declared both an outline, which appears in red, and a border, which appears in black. The border is 1px-thick and appears in the solid style, and the outline is red, 3px-thick, and appears in the dotted style. We also set the width of our box to be 100px.<\/p>\n\n\n\n
      As you can see, the outline appears outside the border in our web element.<\/p>\n\n\n\n
      CSS Outline Sub-properties<\/h2>\n\n\n\n
      The CSS outline property is shorthand for four sub-properties, as we discussed earlier. Let\u2019s explore each of these sub-properties individually to explain how they work.<\/p>\n\n\n\n
      CSS Outline Width<\/h3>\n\n\n\n
      The outline-width property specifies the width of an outline applied to a web element.<\/p>\n\n\n\n
      The outline-width property accepts any of the following length values:<\/p>\n\n\n\n
        \n
      • thin (by default, 1px)<\/li>\n\n\n\n
      • medium (by default, 3px)<\/li>\n\n\n\n
      • thick (by default, 5px)<\/li>\n\n\n\n
      • A size specified in px, pt, cm, em, rem, or another CSS length metric<\/li>\n<\/ul>\n\n\n\n
        Suppose we want to design a box with a 3px (medium) blue, solid outline. We also want our box to have a 1px-wide solid, black border. We could create this box using the following code:<\/p>\n\n\n\n
        <html>\n<p class=\"outlineExample\">This is a box.<\/p>\n<\/html>\n<style>\n.outlineExample {\n\twidth: 100px;\n\tborder: black solid 1px;\n\toutline-style: solid;\n\toutline-color: red;\n\toutline-width: medium;\n}\n<style><\/pre><\/div>\n\n\n\n
        Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
        Let\u2019s break down this example. In our CSS code, we set the width of our box to 100px and defined a 1px-wide solid black border around our box.
        <\/p>\n\n\n\n
        Then, we used three sub-properties to define our border.
        <\/p>\n\n\n\n
        The outline-style property is used to set the style of our outline, which is solid in this case. The outline-color property is used to set the color of our outline, which is red in this example. (We discuss the outline-style and outline-color sub-properties in more depth later in this guide).
        <\/p>\n\n\n\n
        The outline-width property is used to set the width of our outline, which we set to medium<\/code> (which is 3px by default). <\/p>\n\n\n\n
        As you can see, our box has a 3px-wide red outline.
        <\/p>\n\n\n\n
        CSS Outline Color<\/h3>\n\n\n\n
        The outline-color property allows you to set the color of the outline assigned to a particular web element. The property accepts any of the following CSS color types:<\/p>\n\n\n\n
          \n
        • name: A color name, such as blue<\/code> or pink<\/code><\/li>\n\n\n\n
        • hex: A hexadecimal color, such as #f7f7f7<\/code><\/li>\n\n\n\n
        • rgb: An RGB value, such as rgb(102, 211, 56)<\/code><\/li>\n\n\n\n
        • invert: This inverts the color of the outline<\/li>\n\n\n\n
        • hsl: A HSL value, such as hsl(0, 25%, 50%)<\/code><\/li>\n<\/ul>\n\n\n\n
          Suppose we want to design an outline around a box that appears around our box in blue. Our outline should be 3px thick and use the solid style. We could create a box with this outline using the following code:<\/p>\n\n\n\n
          <html>\n<p class=\"outlineExample\">This is a box.<\/p>\n<html>\n  \n<style>\n.outlineExample {\n\twidth: 100px;\n\tborder: black solid 1px;\n\toutline-style: solid;\n\toutline-color: blue;\n\toutline-width: medium;\n}\n<style><\/pre><\/div>\n\n\n\n
          Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
          In this example, we used the outline color property to set the color of our outline to blue. We also used the outline-style property to set the style of our outline to solid, and the outline-width property to set the style of the width of our outline to 3px (or medium<\/code>).<\/p>\n\n\n\n
          In our code, we also made our box 100px wide, and set a 1px solid black border around our box, which makes it easier to see our outline.<\/p>\n\n\n\n
          CSS Outline Style<\/h3>\n\n\n\n
          The outline-style property allows you to set the style of your outline.<\/p>\n\n\n\n
          This property accepts the following values:<\/p>\n\n\n\n
            \n
          • dotted<\/li>\n\n\n\n
          • dashed<\/li>\n\n\n\n
          • groove<\/li>\n\n\n\n
          • ridge<\/li>\n\n\n\n
          • solid<\/li>\n\n\n\n
          • double<\/li>\n\n\n\n
          • inset<\/li>\n\n\n\n
          • outset<\/li>\n\n\n\n
          • none<\/li>\n\n\n\n
          • hidden<\/li>\n<\/ul>\n\n\n\n
            So, the ridge<\/code> value creates a ridge outline, the inset<\/code> value creates an inset outline, the groove<\/code> value creates a groove outline, and so on. To illustrate how these outlines appear, let\u2019s create a box with an outline and apply each of these outline styles to the box individually. Here\u2019s the basic code for our box:<\/p>\n\n\n\n
            <html>\n<p class=\"outlineExample\">This is a box.<\/p>\n<html>\n  \n<style>\n.outlineExample {\n\twidth: 300px;\n\tborder: black solid 1px;\n\toutline-color: blue;\n\toutline-width: medium;\n}\n<style><\/pre><\/div>\n\n\n\n
            Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
            This code creates a box with a blue outline that is 3px wide (using the medium<\/code> value to indicate the width of the outline). The box has a black solid border that is 1px-wide, and the box is 200px wide.<\/p>\n\n\n\n
            To set the style of our box, we should use the outline-style property. So, if we wanted to have a box with a double<\/code> outline style, we could use this CSS style:<\/p>\n\n\n\n
            <style>\n  \n.outlineExample {\noutline-style: dotted;\n}\n<style><\/pre><\/div>\n\n\n\n
            Here is a graphic that shows the results of this property being used with all the potential values accepted by outline-style:<\/p>\n\n\n\n
            \"\"\/<\/figure>\n\n\n\n
            CSS Outline Offset<\/h2>\n\n\n\n
            The outline-offset property adds space between an outline and the border of an element.<\/p>\n\n\n\n
            The space between an element\u2019s outline and border defined by the outline-offset property is transparent. In addition, the outline-offset property is standalone, and cannot be used in the outline shorthand.<\/p>\n\n\n\n
            Suppose we want to design a box with a 1px-wide solid black border and a 2px-wide solid red outline. The outline should be offset by 10px outside the edge of our border. We could create a box with these styles using the following code:  <\/p>\n\n\n\n
            <html>\n<p class=\"outlineExample\">This is a box.<\/p>\n<html>\n  \n<style>\n.outlineExample {\n\twidth: 200px;\n\tborder: black solid 1px;\n\toutline: red 2px solid;\n\toutline-offset: 10px;\n}\n<style><\/pre><\/div>\n\n\n\n
            Click the <\/em>\"Image button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n
            In this example, we defined a box that is 200px wide, has a 1px-wide solid black border, and a 2px-wide red solid outline. The outline for our box is offset by 10px, which means there is a 10px gap between each border edge and the outline.
            <\/p>\n\n\n\n
            Conclusion<\/h2>\n\n\n\n
            The CSS outline property is used to define outlines around the borders of a web element. 
            <\/p>\n\n\n\n
            The outline property is shorthand for three sub-properties used to create custom outlines: outline-color, outline-width, and outline-style. In addition, the outline-offset property is used to add space between an outline and the border of an element.
            <\/p>\n\n\n\n
            This tutorial discussed, with reference to examples, the basics of outlines in CSS, how to use the outline property and its sub-properties, and how to use the outline-offset property. Now you\u2019re equipped with the knowledge you need to start designing outlines like a CSS pro!<\/p>\n","protected":false},"excerpt":{"rendered":"When you\u2019re designing a web element, you may decide that you want an outline to appear around the element on the page. For instance, if you are designing a box that you want to highlight, you may want to add a colored outline around the box to draw attention to the element. That\u2019s where the…","protected":false},"author":240,"featured_media":14823,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14822","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":"","is_sponser_post":"","is_guest_post":""},"yoast_head":"\nCSS Outline: The Complete Guide | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS outline property allows you to add an outline outside the border of an element. On Career Karma, learn how to use the outline CSS property.\" \/>\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\/css-outline\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Outline\" \/>\n<meta property=\"og:description\" content=\"The CSS outline property allows you to add an outline outside the border of an element. On Career Karma, learn how to use the outline CSS property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-outline\/\" \/>\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-04-18T03:20:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:41:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.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=\"James Gallagher\" \/>\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=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Outline\",\"datePublished\":\"2020-04-18T03:20:12+00:00\",\"dateModified\":\"2023-12-01T10:41:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/\"},\"wordCount\":1513,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-outline\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-outline\/\",\"name\":\"CSS Outline: The Complete Guide | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg\",\"datePublished\":\"2020-04-18T03:20:12+00:00\",\"dateModified\":\"2023-12-01T10:41:27+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS outline property allows you to add an outline outside the border of an element. On Career Karma, learn how to use the outline CSS property.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-outline\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg\",\"width\":1020,\"height\":680},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-outline\/#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 Outline\"}]},{\"@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\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Outline: The Complete Guide | Career Karma","description":"The CSS outline property allows you to add an outline outside the border of an element. On Career Karma, learn how to use the outline CSS property.","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\/css-outline\/","og_locale":"en_US","og_type":"article","og_title":"CSS Outline","og_description":"The CSS outline property allows you to add an outline outside the border of an element. On Career Karma, learn how to use the outline CSS property.","og_url":"https:\/\/careerkarma.com\/blog\/css-outline\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-18T03:20:12+00:00","article_modified_time":"2023-12-01T10:41:27+00:00","og_image":[{"width":1020,"height":680,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-outline\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Outline","datePublished":"2020-04-18T03:20:12+00:00","dateModified":"2023-12-01T10:41:27+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-outline\/"},"wordCount":1513,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-outline\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-outline\/","url":"https:\/\/careerkarma.com\/blog\/css-outline\/","name":"CSS Outline: The Complete Guide | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg","datePublished":"2020-04-18T03:20:12+00:00","dateModified":"2023-12-01T10:41:27+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS outline property allows you to add an outline outside the border of an element. On Career Karma, learn how to use the outline CSS property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-outline\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/photo-of-people-sitting-near-wooden-table-3184670.jpg","width":1020,"height":680},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-outline\/#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 Outline"}]},{"@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\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14822","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\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14822"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14822\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14823"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14822"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14822"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14822"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}