{"id":2174,"date":"2017-01-07T19:48:50","date_gmt":"2017-01-07T19:48:50","guid":{"rendered":"http:\/\/cssreset.com\/?p=2174"},"modified":"2022-06-28T09:36:42","modified_gmt":"2022-06-28T09:36:42","slug":"css-tips-outline-vs-border","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/css-tips-outline-vs-border\/","title":{"rendered":"CSS Tips: Outline vs. Border"},"content":{"rendered":"<style type=\"text\/css\"><!--\np.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000}\np.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; -webkit-text-stroke: #000000; min-height: 13.0px}\nspan.s1 {font-kerning: none}\nspan.Apple-tab-span {white-space:pre}\n--><\/style>\n<p>In CSS3, an outline is a line that\u2019s drawn around the outside of an element. Outlines are essentially the exact same thing as borders, they even have the same syntax in your CSS, but they differ in their placement. Borders are lines drawn on the edge of your element, encasing the element\u2019s content, but not ever going <i>outside<\/i> the element\u2019s boundaries. Outlines, however, surround the element completely, meaning they do overstep the boundaries of the element to appear on the outside of it. The purpose of using outlines in CSS is often to give a particular emphasis to your elements.<\/p>\n<p>For outlining text using CSS check out this\u00a0<a href=\"http:\/\/www.coding-dude.com\/wp\/css\/css-stroke-text\/\" target=\"_blank\" rel=\"noopener\" data-saferedirecturl=\"https:\/\/www.google.com\/url?q=http:\/\/www.coding-dude.com\/wp\/css\/css-stroke-text\/&amp;source=gmail&amp;ust=1656494213057000&amp;usg=AOvVaw3j5IYbXDPgxTfsUJBkWf9o\">CSS Stroke<\/a>\u00a0(a definitive guide) that shows various techniques for adding an outline for text elements.<\/p>\n<p>The syntax for creating an outline is the same as for creating a border. The shorthand takes three values: the width of the line, the style of the line, and the color of the line, so it would look like this:<\/p>\n<div id=\"ig-sh-1\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">outline<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">width<\/span><span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span>style<span style=\"color: #00AA00\">&#093;<\/span> <span style=\"color: #00AA00\">&#091;<\/span><span style=\"color: #000000;font-weight: bold\">color<\/span><span style=\"color: #00AA00\">&#093;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p>If you place an outline and a border on one single object, the outline will, of course, surround the border. See an example of how this would look below:<\/p>\n<div id=\"ig-sh-2\" class=\"syntax_hilite\">\r\n\r\n\t\t<div class=\"toolbar\">\r\n\r\n\t\t<div class=\"view-different-container\">\r\n\t\t\t\t\t\t<a href=\"#\" class=\"view-different\">&lt; View <span>plain text<\/span> &gt;<\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t<div class=\"language-name\">css<\/div>\r\n\r\n\t\t\r\n\t\t<br clear=\"both\">\r\n\r\n\t<\/div>\r\n\t\r\n\t<div class=\"code\">\r\n\t\t<ol class=\"css\" style=\"font-family:monospace\"><li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\">.container<span style=\"color: #00AA00\">&#123;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">border<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #933\">1px<\/span> <span style=\"color: #993333\">solid<\/span> <span style=\"color: #cc00cc\">#000<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #000000;font-weight: bold\">outline<\/span><span style=\"color: #00AA00\">:<\/span> <span style=\"color: #933\">2px<\/span> <span style=\"color: #993333\">dashed<\/span> <span style=\"color: #cc00cc\">#45c594<\/span><span style=\"color: #00AA00\">;<\/span><\/div><\/li>\n<li style=\"font-weight: normal;vertical-align:top\"><div style=\"font: normal normal 1em\/1.2em monospace;margin:0;padding:0;background:none;vertical-align:top\"><span style=\"color: #00AA00\">&#125;<\/span><\/div><\/li>\n<\/ol>\t<\/div>\r\n\r\n<\/div>\r\n\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignleft size-large wp-image-2175\" src=\"https:\/\/cssdeck.com\/blog\/\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-08-at-5.52.49-AM-1024x435.png\" alt=\"Screen Shot 2017-01-08 at 5.52.49 AM\" width=\"1024\" height=\"435\" srcset=\"https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-08-at-5.52.49-AM-1024x435.png 1024w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-08-at-5.52.49-AM-300x127.png 300w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-08-at-5.52.49-AM-180x76.png 180w, https:\/\/cssdeck.com\/blog\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-08-at-5.52.49-AM.png 1176w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In CSS3, an outline is a line that\u2019s drawn around the outside of an element. Outlines are essentially the exact same thing as borders, they even have the same syntax in your CSS, but they differ in their placement. Borders [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/css-tips-outline-vs-border\/\" title=\"Click to read 'CSS Tips: Outline vs. Border'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2175,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,6,7],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2174"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=2174"}],"version-history":[{"count":2,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2174\/revisions"}],"predecessor-version":[{"id":3458,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/2174\/revisions\/3458"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2175"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=2174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=2174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=2174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}