{"id":14041,"date":"2020-04-27T04:17:35","date_gmt":"2020-04-27T11:17:35","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14041"},"modified":"2023-12-01T02:44:11","modified_gmt":"2023-12-01T10:44:11","slug":"css-borders","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-borders\/","title":{"rendered":"CSS Borders: Step-by-Step Tutorial"},"content":{"rendered":"\n

The CSS border property is used to set the border of an <\/em>HTML<\/em><\/a> element. It’s shorthand properties are <\/em>border-width<\/em><\/code>, <\/em>border-color<\/em><\/code>, and <\/em>border-style<\/em><\/code>.<\/em><\/p>\n\n\n\n

\n\n\n\n

Adding borders around elements on a web page is an important feature of web design<\/a>. Borders can be used to separate the contents of a web page, making it easier for people to interpret the information presented on the page.<\/p>\n\n\n\n

The CSS border property is used to set the border of an HTML<\/a> element. The border property is shorthand for three sub-properties that define the style, color, and width of a border.<\/p>\n\n\n\n

In this tutorial, we\u2019ll discuss how to use the CSS border property, and how to use its sub-properties, to design a border for a HTML element. By the end of this tutorial, you\u2019ll be equipped with all the knowledge you need to design a border in CSS.<\/p>\n\n\n\n

An Intro to Borders in CSS<\/h2>\n\n\n\n

As we previously stated, the CSS border property is used to specify a border around a web element. For instance, a border could be applied around an image, a box, or a web form.<\/p>\n\n\n\n

The border property is shorthand for three sub-properties that are used to apply specific styles to an element\u2019s border. The shorthand properties are:<\/p>\n\n\n\n

    \n
  • border-width<\/code> (specifies the thickness of a border)<\/li>\n\n\n\n
  • border-color<\/code> (specifies the color of a border)<\/li>\n\n\n\n
  • border-style<\/code> (specifies the style of a border)<\/li>\n<\/ul>\n\n\n\n

    When you\u2019re defining a border, you can either use the border<\/code> property to specify the border or use each of its sub-properties. We\u2019ll discuss both approaches throughout this article.<\/p>\n\n\n\n

    CSS Border Sub-properties<\/h2>\n\n\n\n

    As we discussed earlier, there are three sub-properties used to define a border in CSS. Let\u2019s break down each of these sub-properties and explore an example of how they work.<\/p>\n\n\n\n

    border-style<\/code> Property in CSS<\/h3>\n\n\n\n

    The border style property is used to define what type of border to display on a web page. In other words, border-style<\/code> determines how the border lines look on a web page: solid, dotted, dashed, etc.<\/p>\n\n\n\n

    There are 10 possible values that can be assigned to the border-style<\/code> property. Here\u2019s how each of these styles appear when applied to a box, accompanied with a description of each style:<\/p>\n\n\n

    \n
    \"examples
    CSS border-style<\/code> Property Examples<\/figcaption><\/figure>\n<\/div>\n\n\n

    The CSS code we used to create these web elements is as follows: <\/p>\n\n\n\n

    .box { border-style: solid; }\n.box { border-style: dotted; }\n.box { border-style: dashed; }\n.box { border-style: double; }\n.box { border-style: ridge; }\n.box { border-style: groove; }\n.box { border-style: inset; }\n.box { border-style: outset; }\n.box { border-style: none; }\n.box { border-style: hidden; }<\/pre><\/div>\n\n\n\n
    As you can see, in our code we have used each potential value to style our borders.<\/p>\n\n\n\n
    border-width<\/code> Property in CSS<\/h3>\n\n\n\n
    The border-width<\/code> property sets the width of a CSS border. The width of a border can be set using a CSS length value (pt<\/code>, px<\/code>, em<\/code>, etc.) or by using one of the three custom border-width<\/code> values: thin<\/code>, medium<\/code>, and thick<\/code>.<\/p>\n\n\n\n
    Suppose we wanted to create a 5px<\/code> solid border around a box. We could do so using this code:<\/p>\n\n\n\n
    <style>\n  .box {\n\tborder-style: solid;\n\tborder-width: 5px;\n  }\n<\/style>\n<html>\n  <p class=\"box\">5px thick solid border<\/p>\n<\/html><\/pre><\/div>\n\n\n\n
    Click the <\/em>\"Image button in the code editor above to see the output of our code.<\/em><\/p>\n\n\n\n
    We have created a border that uses the solid style and has a thickness of 5px.<\/p>\n\n\n\n
    border-color<\/code> Property in CSS<\/h3>\n\n\n\n
    As you’d expect, a property for color specifies the color. The border-color<\/code> property is used to set the color for a border in CSS. The color values accepted by the border-color<\/code> property are:<\/p>\n\n\n\n
      \n
    • name (the name of a color, such as blue<\/code>)<\/li>\n\n\n\n
    • HEX (a hexadecimal color value, such as #000<\/code>)<\/li>\n\n\n\n
    • HSL (a HSL color value, such as hsl(10, 100%, 25%)<\/code>)<\/li>\n\n\n\n
    • RGB (an RGB color value, such as rgb(102, 222, 95)<\/code>)<\/li>\n\n\n\n
    • transparent<\/code><\/li>\n<\/ul>\n\n\n\n
      Suppose you wanted to create a box with a dotted blue border that is 5px wide. You could do so using this code:<\/p>\n\n\n\n
      <style>\n  .box {\n    border-style: dotted;\n\tborder-width: 5px;\n\tborder-color: blue;\n  }\n<\/style>\n<html>\n  <p class=\"box\">5px thick blue dotted border<\/p>\n<\/html><\/pre><\/div>\n\n\n\n
      Click the <\/em>\"Image button in the code editor above to see the output of our code.<\/em><\/p>\n\n\n\n
      Sub-property Multiple Values<\/h3>\n\n\n\n
      Each of the sub-properties for the CSS border<\/code> property can accept multiple values. This allows you to set custom borders for each edge of an element in CSS.<\/p>\n\n\n\n
      Here are the rules to keep in mind if you want to set custom borders for each edge of an element in CSS:<\/p>\n\n\n\n
        \n
      • If you specify one value, the border style will be applied to all edges.<\/li>\n\n\n\n
      • If you specify two values, the following order will be used:\n
          \n
        • top and bottom, left and right<\/li>\n<\/ul>\n<\/li>\n\n\n\n
        • If you specify three values, the following order will be used:\n
            \n
          • top, right and left, bottom<\/li>\n<\/ul>\n<\/li>\n\n\n\n
          • If you specify four values, the following order will be used:\n
              \n
            • top, right, bottom, left<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
              Suppose we wanted to create a border with a solid top and bottom and a dotted left and right. We could use the following code to accomplish this task:<\/p>\n\n\n\n
              <style>\n  .box { border-style: solid dashed; }\n<\/style>\n<html>\n  <p class=\"box\">solid top and dashed sides border<\/p>\n<\/html><\/pre><\/div>\n\n\n\n
              Click the <\/em>\"Image button in the code editor above to see the output of our code.<\/em><\/p>\n\n\n\n
              In our code, we created a combination border by specifying two border styles. This element uses the dashed border style on its left and right edges, and the solid style on the top and bottom of the element.<\/p>\n\n\n\n
              We would use the same approach if we wanted to change the border color or width.<\/p>\n\n\n\n
              CSS Border Shorthand<\/h3>\n\n\n\n
              There are three CSS sub-properties that can be used to define a border.<\/p>\n\n\n\n
              In the above examples, we have discussed how to use each of these sub-properties individually. However, it is possible to specify all the border sub-properties in a single property. This will allow us to shorten our code.<\/p>\n\n\n\n
              The border property uses the following structure to define a CSS border:<\/p>\n\n\n\n
                \n
              • border-width<\/code> (optional)<\/li>\n\n\n\n
              • border-style<\/code> (required)<\/li>\n\n\n\n
              • border-color<\/code> (optional)<\/li>\n<\/ul>\n\n\n\n
                Suppose we wanted to create a 5px solid pink border around a line of text. We could do so using this code:<\/p>\n\n\n\n
                <style>\n  .box { border: 5px solid pink };\n<\/style>\n<html>\n  <p class=\"box\">5px solid pink border<\/p>\n<\/html><\/pre><\/div>\n\n\n\n
                Click the \"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, you can see that we were able to define our border on one line, instead of using three lines and each individual border sub-property.<\/p>\n\n\n\n
                CSS Individual Borders<\/h2>\n\n\n\n
                The border sub-properties and property can also be applied to an individual side of a web element. If you want to set the appearance of a specific border on a web element, you can use these properties:<\/p>\n\n\n\n
                  \n
                • border-left-[property]<\/code><\/li>\n\n\n\n
                • border-right-[property]<\/code><\/li>\n\n\n\n
                • border-top-[property]<\/code><\/li>\n\n\n\n
                • border-bottom-[property]<\/code><\/li>\n<\/ul>\n\n\n\n
                  The value of property can be either: <\/p>\n\n\n\n
                    \n
                  • style<\/code> (to set the style of the border)<\/li>\n\n\n\n
                  • color<\/code> (to set the color of the border)<\/li>\n\n\n\n
                  • width<\/code> (to set the thickness of the border)<\/li>\n\n\n\n
                  • blank<\/em> (to use border shorthand to define the border)<\/li>\n<\/ul>\n\n\n\n
                    The properties and values are simple to use and remember, but here’s a list of all possible sub-property-value combinations: <\/p>\n\n\n\n
                      \n
                    • border left style <\/li>\n\n\n\n
                    • border left color<\/li>\n\n\n\n
                    • border left width<\/li>\n<\/ul>\n\n\n\n
                        \n
                      • border right style<\/li>\n\n\n\n
                      • border right color<\/li>\n\n\n\n
                      • border right width<\/li>\n<\/ul>\n\n\n\n
                          \n
                        • border top style<\/li>\n\n\n\n
                        • border top color<\/li>\n\n\n\n
                        • border top width<\/li>\n<\/ul>\n\n\n\n
                            \n
                          • border bottom style<\/li>\n\n\n\n
                          • border bottom color<\/li>\n\n\n\n
                          • border bottom width<\/li>\n<\/ul>\n\n\n\n
                            Suppose we want to create a box of text with a solid border on the left that is 2px wide, and a dotted border on the top that is 5px wide. We could use the following code to accomplish this task:<\/p>\n\n\n\n
                            <style>\n  .box {\n\tborder-left: 2px solid;\n\tborder-top: 5px dotted;\n  }\n<\/style>\n<html>\n  <p class=\"box\">mixed border<\/p>\n<\/html><\/pre><\/div>\n\n\n\n
                            On the left of our box, we have a 2px solid border, while the top has a 5pc dotted border. By using the individual border properties, we were able to specify how the border should appear on each edge of the box.<\/p>\n\n\n\n
                            Conclusion<\/h2>\n\n\n\n
                            The border<\/code> property is used to create a border in CSS, and it has three sub-properties\u2014style, color, and width\u2014which are used to customize each part of a border separately.<\/p>\n\n\n\n
                            This tutorial discussed, with a few examples, how to use the border property, and all of its three sub-properties, to create a border in CSS. We also explored how to style each side of an element using the individual border properties.<\/p>\n\n\n\n
                            If you want to learn more about CSS borders, see our other tutorials that explain how to implement border images, border collapse, outlines and outline offsets, a border radius for rounded corners, and the aesthetically-pleasing box shadow effect!<\/p>\n","protected":false},"excerpt":{"rendered":"The CSS border property is used to set the border of an HTML element. It's shorthand properties are border-width, border-color, and border-style. Adding borders around elements on a web page is an important feature of web design. Borders can be used to separate the contents of a web page, making it easier for people to…","protected":false},"author":240,"featured_media":14124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14041","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 Borders: Step-by-Step Tutorial | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS border property is used to add a border around a web element. On Career Karma, learn how to use the border property in CSS.\" \/>\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-borders\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Borders: Step-by-Step Tutorial\" \/>\n<meta property=\"og:description\" content=\"The CSS border property is used to add a border around a web element. On Career Karma, learn how to use the border property in CSS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-borders\/\" \/>\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-27T11:17:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T10:44:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\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=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Borders: Step-by-Step Tutorial\",\"datePublished\":\"2020-04-27T11:17:35+00:00\",\"dateModified\":\"2023-12-01T10:44:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/\"},\"wordCount\":1254,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-borders\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/\",\"url\":\"https:\/\/careerkarma.com\/blog\/css-borders\/\",\"name\":\"CSS Borders: Step-by-Step Tutorial | Career Karma\",\"isPartOf\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg\",\"datePublished\":\"2020-04-27T11:17:35+00:00\",\"dateModified\":\"2023-12-01T10:44:11+00:00\",\"author\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS border property is used to add a border around a web element. On Career Karma, learn how to use the border property in CSS.\",\"breadcrumb\":{\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/careerkarma.com\/blog\/css-borders\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage\",\"url\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg\",\"contentUrl\":\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg\",\"width\":1200,\"height\":675,\"caption\":\"CSS Borders cover image\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/careerkarma.com\/blog\/css-borders\/#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 Borders: Step-by-Step Tutorial\"}]},{\"@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 Borders: Step-by-Step Tutorial | Career Karma","description":"The CSS border property is used to add a border around a web element. On Career Karma, learn how to use the border property in CSS.","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-borders\/","og_locale":"en_US","og_type":"article","og_title":"CSS Borders: Step-by-Step Tutorial","og_description":"The CSS border property is used to add a border around a web element. On Career Karma, learn how to use the border property in CSS.","og_url":"https:\/\/careerkarma.com\/blog\/css-borders\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-04-27T11:17:35+00:00","article_modified_time":"2023-12-01T10:44:11+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.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":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-borders\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Borders: Step-by-Step Tutorial","datePublished":"2020-04-27T11:17:35+00:00","dateModified":"2023-12-01T10:44:11+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-borders\/"},"wordCount":1254,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-borders\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-borders\/","url":"https:\/\/careerkarma.com\/blog\/css-borders\/","name":"CSS Borders: Step-by-Step Tutorial | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg","datePublished":"2020-04-27T11:17:35+00:00","dateModified":"2023-12-01T10:44:11+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS border property is used to add a border around a web element. On Career Karma, learn how to use the border property in CSS.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-borders\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/css-borders.jpg","width":1200,"height":675,"caption":"CSS Borders cover image"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-borders\/#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 Borders: Step-by-Step Tutorial"}]},{"@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\/14041","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=14041"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14041\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/14124"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}