{"id":2348,"date":"2019-08-03T16:11:33","date_gmt":"2019-08-03T16:11:33","guid":{"rendered":"https:\/\/webdevtrick.com\/?p=2348"},"modified":"2019-08-03T16:11:33","modified_gmt":"2019-08-03T16:11:33","slug":"css-outline-styles","status":"publish","type":"post","link":"https:\/\/webdevtrick.com\/css-outline-styles\/","title":{"rendered":"CSS Outline Styles With HTML Box | 9 Outline Effects"},"content":{"rendered":"<p><strong>How we can create different kinds of outline styles using CSS? Solution: CSS Outline Styles With HTML Box, 9 Outline Styles Effects.<\/strong><\/p>\n<p>I am sure that, you know about the <strong>outline<\/strong>. The outline is a type of border, but the difference between these are border is a part of the element and outline is not. Special we use an <strong>outline to give the style<\/strong> an element, there are many <strong>outline styles<\/strong> we can create <strong>using HTML and CSS<\/strong>.<\/p>\n<p>Today you will learn to create <strong>9 different types of outline<\/strong> style. I think this post is useful if you are a designer or beginner on websites field. There are 9 types of styles like <strong>auto, double line, groove, ridge, etc<\/strong>. I have tried all the outline styles in <strong>HTML<\/strong> based box, you can try anywhere as you want.<\/p>\n<p>So, Today I am sharing<strong> CSS Outline Styles with HTML Box<\/strong>. There are many <strong>amazing outlines<\/strong> you will shock if you see these first time. You can use these effects on webpage&#8217;s elements like <span><a href=\"https:\/\/webdevtrick.com\/pure-css-card\/\" target=\"_blank\" rel=\"noopener noreferrer\">cards<\/a><\/span>, box, components, etc. That will be a good practice of <strong>CSS<\/strong> for beginners.<\/p>\n<p>If you are thinking now how these<strong> outline effects<\/strong> actually are, then see the<strong> preview<\/strong> given below.<\/p>\n<h3>Preview Of 9 Outline Effects<\/h3>\n<p>See this video preview to getting an idea of how these <strong>effects look like<\/strong>.<\/p>\n<div style=\"width: 640px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-2348-1\" width=\"640\" height=\"422\" loop autoplay preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/9-outline-styles-css.mp4?_=1\" \/><a href=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/9-outline-styles-css.mp4\">https:\/\/webdevtrick.com\/wp-content\/uploads\/9-outline-styles-css.mp4<\/a><\/video><\/div>\n<a class=\"maxbutton-2 maxbutton maxbutton-demo\" target=\"_blank\" rel=\"noopener\" href=\"https:\/\/webdevtrick.com\/demos\/css-outline-styles\/\"><span class='mb-text'>Live Demo<\/span><\/a>\n<p>Now you can see these visually, you can also see live by clicking the <span><a href=\"https:\/\/webdevtrick.com\/tag\/button\" target=\"_blank\" rel=\"noopener noreferrer\">button<\/a><\/span> above. If you like these, then get the <strong>source code<\/strong> of its.<\/p>\n<p><span style=\"font-size: 14pt;\">You May Also Like:<\/span><\/p>\n<ul>\n \t<span><\/p>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-beautifier-and-minifier\/\" target=\"_blank\" rel=\"noopener noreferrer\">HTML CSS Beautifier and Minifier<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-text-effects\/\" target=\"_blank\" rel=\"noopener noreferrer\">8 Different Text Effects<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/css-overlay-menu-source-code\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS Overlay Menu Example<\/a><\/li>\n<li><a href=\"https:\/\/webdevtrick.com\/html-css-navigation-bar\/\" target=\"_blank\" rel=\"noopener noreferrer\">Navigation Bar With Hover Effect<\/a><\/li>\n<p><\/span>\n<\/ul>\n<h2>CSS Outline Styles With HTML Source Code<\/h2>\n<p>Before <strong>sharing source code<\/strong>, let&#8217;s talk about these. First I have created 9 boxes with <em>180px<\/em> width and height. I have also used margin by <em>40px<\/em> by the top and others is auto. Also for the <span><a href=\"https:\/\/webdevtrick.com\/tag\/responsive\" target=\"_blank\" rel=\"noopener noreferrer\">responsive<\/a><\/span> design used <span class=\"lang:css decode:true crayon-inline \">display: grid;<\/span> and some other grid-related properties (<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/CSS_Grid_Layout\" target=\"_blank\" rel=\"noopener noreferrer\">info<\/a>).<\/p>\n<p>Now in CSS file, I have styled all the boxes. there are some commands in outline property to create different types of outlines. see the list of outline types.<\/p>\n<ul>\n<li><strong>auto<\/strong><\/li>\n<li><strong>double<\/strong><\/li>\n<li><strong>groove<\/strong><\/li>\n<li><strong>ridge<\/strong><\/li>\n<li><strong>dotted<\/strong><\/li>\n<li><strong>dashed<\/strong><\/li>\n<li><strong>outset<\/strong><\/li>\n<li><strong>inset<\/strong><\/li>\n<\/ul>\n<p>These all are the outline value to create a <strong>different effect<\/strong>. I have also used <span class=\"lang:css decode:true crayon-inline \">outline-offset<\/span> property, The outline-offset sets the amount of space between an outline and the edge or border of an element. That is the whole concept, you will understand easily left other things after getting the codes.<\/p>\n<p>For creating this outline style pack you have to create only 2 files, one for<strong> HTML<\/strong> and one for <strong>CSS.<\/strong> Follow the steps to creating these without any error.<\/p>\n<p><span style=\"font-size: 14pt;\">index.html<\/span><\/p>\n<p>Create an HTML file named &#8216;<strong><em>index.html<\/em><\/strong>&#8216; and put these codes given here below.<\/p>\n<pre class=\"lang:xhtml decode:true \" title=\"index.html\">&lt;!DOCTYPE html&gt;\r\n&lt;!--Code By Webdevtrcik ( https:\/\/webdevtrick.com )--&gt;\r\n&lt;html lang=\"en\" &gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"UTF-8\"&gt;\r\n  &lt;title&gt;CSS Outline Styles | Webdevtrick.com&lt;\/title&gt;\r\n  &lt;link rel=\"stylesheet\" href=\"style.css\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n\r\n&lt;div class=\"main\"&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes auto\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;auto : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes double\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;double : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes groove\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;groove : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes ridge\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;ridge : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes dashed\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;dashed : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes dotted-1\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;dotted : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes dotted-2\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;dotted 2 : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes outset\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;outset : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=\"box\"&gt;\r\n\t\t&lt;div class=\"boxes inset\"&gt;&lt;\/div&gt;\r\n\t\t&lt;code&gt;inset : outline&lt;\/code&gt;\r\n\t&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p><span style=\"font-size: 14pt;\">style.css<\/span><\/p>\n<p>Now create a CSS file named &#8216;<strong><em>style.css<\/em><\/strong>&#8216; and put these codes given here.<\/p>\n<pre class=\"lang:css decode:true \" title=\"style.css\">\/** Code By Webdevtrcik ( https:\/\/webdevtrick.com ) **\/\r\n.main {\r\n\tdisplay: grid;\r\n\theight: 100%;\r\n\tgrid-template-rows: auto 1fr auto;\r\n\tgrid-template-columns: repeat(auto-fill, minmax(240px, 1fr));\r\n\ttext-align: center;\r\n}\r\n.box {\r\n\tmargin-bottom: 50px;\r\n}\r\n.boxes {\r\n\tmargin: 40px auto;\r\n\twidth: 180px;\r\n\theight: 180px;\r\n}\r\ncode {\r\n\tbackground-color: #dedede;\r\n\tpadding: 4px 6px;\r\n\tborder-radius: 3px;\r\n}\r\n.auto {\r\n\tbackground-color: #2ab1ce;\r\n\toutline: 50px auto #a4ecfc;\r\n}\r\n.double {\r\n\tbackground-color: #e60023;\r\n\toutline: 14px double white;\r\n\toutline-offset: -20px;\r\n}\r\n.groove {\r\n\tbackground-color: #f05855;\r\n\toutline: 14px groove #2bb673;\r\n\toutline-offset: -15px;\r\n}\r\n.ridge {\r\n\tbackground-color: #f24c5e;\r\n\toutline: 14px ridge #e60023;\r\n\toutline-offset: -14px;\r\n}\r\n.dotted-1 {\r\n\tbackground-color: #5cb85c;\r\n\toutline: 24px dotted white;\r\n\toutline-offset: -12px;\r\n}\r\n.dotted-2 {\r\n\tbackground-color: #f05855;\r\n\toutline: 40px dotted white;\r\n\toutline-offset: -18px;\r\n}\r\n.dashed {\r\n\tbackground-color: #4267b2;\r\n\toutline: 22px dashed white;\r\n\toutline-offset: -12px;\r\n}\r\n.outset {\r\n\tbackground-color: smokewhite;\r\n\toutline: 24px outset#208bfd;\r\n\toutline-offset: -24px;\r\n}\r\n.inset {\r\n\tbackground-color: smokewhite;\r\n\toutline: 24px inset #ff8b0e;\r\n\toutline-offset: -24px;\r\n}\r\n<\/pre>\n<p>That&#8217;s It. Now you have successfully created <strong>CSS Outline Styles With HTML Box<\/strong>,<strong> 9 Different types of Outline Effects<\/strong>. If you have any doubt or question comment down below.<\/p>\n<p><span style=\"font-family: impact, sans-serif;\">Thanks For Visiting, Keep Visiting.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How we can create different kinds of outline styles using CSS? Solution: CSS Outline Styles With HTML Box, 9 Outline Styles Effects. I am sure that, you know about the outline. The outline is a type of border, but the difference between these are border is a part of the element and outline is not. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2350,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[43,42,22],"tags":[190,210,155,68,305,154,192,67],"class_list":["post-2348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-html","category-web-design","tag-example-and-source-code","tag-grid","tag-html-and-css","tag-html-source-code","tag-outline","tag-pure-css","tag-responsive","tag-source-code"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Outline Styles With HTML Box | 9 Outline Effects<\/title>\n<meta name=\"description\" content=\"Want to different types of outline using pure CSS? Check out this CSS Outline Styles With HTML Box, 9 Outline Effects. Get source code now.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevtrick.com\/css-outline-styles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Outline Styles With HTML Box | 9 Outline Effects\" \/>\n<meta property=\"og:description\" content=\"Want to different types of outline using pure CSS? Check out this CSS Outline Styles With HTML Box, 9 Outline Effects. Get source code now.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevtrick.com\/css-outline-styles\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Dev Trick\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webdevtrick\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-03T16:11:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"shaan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"shaan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/\"},\"author\":{\"name\":\"shaan\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\"},\"headline\":\"CSS Outline Styles With HTML Box | 9 Outline Effects\",\"datePublished\":\"2019-08-03T16:11:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/\"},\"wordCount\":537,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg\",\"keywords\":[\"example and source code\",\"grid\",\"html and css\",\"html source code\",\"outline\",\"pure css\",\"responsive\",\"source code\"],\"articleSection\":[\"CSS\",\"HTML\",\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webdevtrick.com\/css-outline-styles\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/\",\"url\":\"https:\/\/webdevtrick.com\/css-outline-styles\/\",\"name\":\"CSS Outline Styles With HTML Box | 9 Outline Effects\",\"isPartOf\":{\"@id\":\"https:\/\/webdevtrick.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg\",\"datePublished\":\"2019-08-03T16:11:33+00:00\",\"description\":\"Want to different types of outline using pure CSS? Check out this CSS Outline Styles With HTML Box, 9 Outline Effects. Get source code now.\",\"breadcrumb\":{\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webdevtrick.com\/css-outline-styles\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg\",\"width\":1200,\"height\":630,\"caption\":\"css outline styles html\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webdevtrick.com\/css-outline-styles\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webdevtrick.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Outline Styles With HTML Box | 9 Outline Effects\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webdevtrick.com\/#website\",\"url\":\"https:\/\/webdevtrick.com\/\",\"name\":\"Web Dev Trick\",\"description\":\"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial\",\"publisher\":{\"@id\":\"https:\/\/webdevtrick.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webdevtrick.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webdevtrick.com\/#organization\",\"name\":\"Web Dev Trick\",\"url\":\"https:\/\/webdevtrick.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"contentUrl\":\"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png\",\"width\":512,\"height\":512,\"caption\":\"Web Dev Trick\"},\"image\":{\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webdevtrick\/\",\"https:\/\/pinterest.com\/webdevtrick\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3\",\"name\":\"shaan\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g\",\"caption\":\"shaan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Outline Styles With HTML Box | 9 Outline Effects","description":"Want to different types of outline using pure CSS? Check out this CSS Outline Styles With HTML Box, 9 Outline Effects. Get source code now.","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:\/\/webdevtrick.com\/css-outline-styles\/","og_locale":"en_US","og_type":"article","og_title":"CSS Outline Styles With HTML Box | 9 Outline Effects","og_description":"Want to different types of outline using pure CSS? Check out this CSS Outline Styles With HTML Box, 9 Outline Effects. Get source code now.","og_url":"https:\/\/webdevtrick.com\/css-outline-styles\/","og_site_name":"Web Dev Trick","article_publisher":"https:\/\/www.facebook.com\/webdevtrick\/","article_published_time":"2019-08-03T16:11:33+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg","type":"image\/jpeg"}],"author":"shaan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"shaan","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#article","isPartOf":{"@id":"https:\/\/webdevtrick.com\/css-outline-styles\/"},"author":{"name":"shaan","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3"},"headline":"CSS Outline Styles With HTML Box | 9 Outline Effects","datePublished":"2019-08-03T16:11:33+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevtrick.com\/css-outline-styles\/"},"wordCount":537,"commentCount":2,"publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"image":{"@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg","keywords":["example and source code","grid","html and css","html source code","outline","pure css","responsive","source code"],"articleSection":["CSS","HTML","Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevtrick.com\/css-outline-styles\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevtrick.com\/css-outline-styles\/","url":"https:\/\/webdevtrick.com\/css-outline-styles\/","name":"CSS Outline Styles With HTML Box | 9 Outline Effects","isPartOf":{"@id":"https:\/\/webdevtrick.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage"},"image":{"@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg","datePublished":"2019-08-03T16:11:33+00:00","description":"Want to different types of outline using pure CSS? Check out this CSS Outline Styles With HTML Box, 9 Outline Effects. Get source code now.","breadcrumb":{"@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevtrick.com\/css-outline-styles\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#primaryimage","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/css-outline-styles.jpg","width":1200,"height":630,"caption":"css outline styles html"},{"@type":"BreadcrumbList","@id":"https:\/\/webdevtrick.com\/css-outline-styles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevtrick.com\/"},{"@type":"ListItem","position":2,"name":"CSS Outline Styles With HTML Box | 9 Outline Effects"}]},{"@type":"WebSite","@id":"https:\/\/webdevtrick.com\/#website","url":"https:\/\/webdevtrick.com\/","name":"Web Dev Trick","description":"HTML5, CSS3, JS, PHP Source Code &amp; Tutorial","publisher":{"@id":"https:\/\/webdevtrick.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevtrick.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevtrick.com\/#organization","name":"Web Dev Trick","url":"https:\/\/webdevtrick.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","contentUrl":"https:\/\/webdevtrick.com\/wp-content\/uploads\/logo-fb-1.png","width":512,"height":512,"caption":"Web Dev Trick"},"image":{"@id":"https:\/\/webdevtrick.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webdevtrick\/","https:\/\/pinterest.com\/webdevtrick\/"]},{"@type":"Person","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/c79bae83976f92fe305c22342b2a0be3","name":"shaan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevtrick.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60aa6ee93605bda7bc598d11dd748709a69bdb55a080124cc382114d8d7e7665?s=96&d=mm&r=g","caption":"shaan"}}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/2348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/comments?post=2348"}],"version-history":[{"count":9,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/2348\/revisions"}],"predecessor-version":[{"id":2359,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/posts\/2348\/revisions\/2359"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media\/2350"}],"wp:attachment":[{"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/media?parent=2348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/categories?post=2348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevtrick.com\/wp-json\/wp\/v2\/tags?post=2348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}