{"id":400,"date":"2022-05-24T20:12:24","date_gmt":"2022-05-24T20:12:24","guid":{"rendered":"https:\/\/gyanipandit.com\/programming\/?p=400"},"modified":"2023-03-28T11:27:25","modified_gmt":"2023-03-28T11:27:25","slug":"css-outline-property","status":"publish","type":"post","link":"https:\/\/gyanipandit.com\/programming\/css-outline-property\/","title":{"rendered":"CSS Outline Property"},"content":{"rendered":"\n<p class=\"has-text-align-center\"><strong>Outline CSS<\/strong><\/p>\n\n\n\n<p>Let\u2019s now study another interesting topic in CSS, which is outline. This may seem similar to borders, but there are some things that need to be discussed. When we talk about the layout of some content with borders, there is some content first, and then a border surrounds the content. So, where is the outline then? The outline resides beyond borders.<\/p>\n\n\n\n<p>This means that the content is surrounded by the border, and then outside the border, there is an outline. Basically, the outline is drawn outside the border, to highlight that element, or to make it stand out.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"CSS Outline Property | Lecture 21 | CSS for Beginners\" width=\"696\" height=\"392\" src=\"https:\/\/www.youtube.com\/embed\/1ZpiuP0y05k?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Don&#8217;t worry if this seems to be confusing. Soon we are going to see the demonstration about outlines. But before that, we need to understand some properties related to outlines. Here are some properties related to the outline \u2013<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>outline-style<\/li>\n\n\n\n<li>outline-color<\/li>\n\n\n\n<li>outline-width<\/li>\n\n\n\n<li>outline-offset<\/li>\n\n\n\n<li>outline<\/li>\n<\/ul>\n\n\n\n<p>Let&#8217;s discuss all the properties one by one \u2013<\/p>\n\n\n\n<p>outline-style \u00e0 With this property, we are specifying the style of the outline. There are various styles for this property, like solid, inset, ridge, dashed, dotted, etc. Here are some values of this property with a little description<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>dashed \u2013 This produces a dashed outline<\/li>\n\n\n\n<li>dotted \u2013 This produces a dotted outline<\/li>\n\n\n\n<li>groove \u2013 This makes an outline look carved into the page<\/li>\n\n\n\n<li>double \u2013 This produces the double lines outline<\/li>\n\n\n\n<li>hidden \u2013 The outline is hidden<\/li>\n\n\n\n<li>inset \u2013 This makes the outline appear as embedded in the page<\/li>\n\n\n\n<li>outset \u2013 This is opposite to the inset outline<\/li>\n\n\n\n<li>ridge \u2013 This is somewhat opposite to groove.<\/li>\n<\/ul>\n\n\n\n<p>Please refer to the below example for understanding outline-style property \u2013<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"465\" height=\"252\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property.jpg\" alt=\"\" class=\"wp-image-401\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property.jpg 465w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-300x163.jpg 300w\" sizes=\"auto, (max-width: 465px) 100vw, 465px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see in the above example, we get a dashed outline here. Have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1023\" height=\"137\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-1.jpg\" alt=\"\" class=\"wp-image-402\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-1.jpg 1023w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-1-300x40.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-1-768x103.jpg 768w\" sizes=\"auto, (max-width: 1023px) 100vw, 1023px\" \/><\/figure>\n<\/div>\n\n\n<p>We can also specify a color for the outline<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>outline color &#8211; With this property, we can set the color of our outline. So, the value for this property is going to be some color. You can give the color in different ways like by name, hex value, RGB value, etc.<\/li>\n<\/ul>\n\n\n\n<p>Please refer to the below example for understanding the outline-color property-<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"433\" height=\"263\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-2.jpg\" alt=\"\" class=\"wp-image-403\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-2.jpg 433w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-2-300x182.jpg 300w\" sizes=\"auto, (max-width: 433px) 100vw, 433px\" \/><\/figure>\n<\/div>\n\n\n<p>As in the output, we can see that we got a red outline. You can try giving some different styles of outlines, and try some different colors as well. Have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1022\" height=\"125\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-3.jpg\" alt=\"\" class=\"wp-image-404\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-3.jpg 1022w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-3-300x37.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-3-768x94.jpg 768w\" sizes=\"auto, (max-width: 1022px) 100vw, 1022px\" \/><\/figure>\n<\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>outline-width &#8211; This property helps us set the thickness of the outline for an element. The value for this property can be a number(like 10px, 20px etc), or it can also be specified as thin (this is 1px), medium (this is 3px) or thick (this is 5px). Please refer to the below example to understand the outline-width property \u2013<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"264\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-4.jpg\" alt=\"\" class=\"wp-image-405\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-4.jpg 453w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-4-300x175.jpg 300w\" sizes=\"auto, (max-width: 453px) 100vw, 453px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, the width of the outline is now changed. Have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"108\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-5.jpg\" alt=\"\" class=\"wp-image-406\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-5.jpg 1018w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-5-300x32.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-5-768x81.jpg 768w\" sizes=\"auto, (max-width: 1018px) 100vw, 1018px\" \/><\/figure>\n<\/div>\n\n\n<p>You can try changing the border width. Also, you can have some values like thin, medium, thick, etc.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>outline-offset &#8211; When we talk about borders, they are placed such that they are just surrounding the content, and as discussed earlier, the outline is a line outside the border. With this value, we can create some space between the border\/edge and the outline. Have a look at the below example, which gives a clearer picture of the outline-offset property &#8211;<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"428\" height=\"303\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-6.jpg\" alt=\"\" class=\"wp-image-407\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-6.jpg 428w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-6-300x212.jpg 300w\" sizes=\"auto, (max-width: 428px) 100vw, 428px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, we have applied many properties over here, like border, outline-style, outline-color, and outline-width, and along with this, we have also set the offset. You can get the difference between what we were talking about, through the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"968\" height=\"83\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-7.jpg\" alt=\"\" class=\"wp-image-408\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-7.jpg 968w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-7-300x26.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-7-768x66.jpg 768w\" sizes=\"auto, (max-width: 968px) 100vw, 968px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, there is some space now, between the border, and the outline. If you are required to do this, you can try this.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>outline &#8211; This is a shorthand property, which means that with this property, we can declare color, style, and width together, which we have been doing separately before this. Have a look at the below example, which can give a clearer picture of what this property does<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"498\" height=\"306\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-8.jpg\" alt=\"\" class=\"wp-image-409\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-8.jpg 498w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-8-300x184.jpg 300w\" sizes=\"auto, (max-width: 498px) 100vw, 498px\" \/><\/figure>\n<\/div>\n\n\n<p>As you can see, with the help of this outline shorthand property, we are able to set the width, style, and color of the outline. Have a look at the output &#8211;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"943\" height=\"73\" src=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-9.jpg\" alt=\"\" class=\"wp-image-410\" srcset=\"https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-9.jpg 943w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-9-300x23.jpg 300w, https:\/\/gyanipandit.com\/programming\/wp-content\/uploads\/2022\/04\/Outline-property-9-768x59.jpg 768w\" sizes=\"auto, (max-width: 943px) 100vw, 943px\" \/><\/figure>\n<\/div>\n\n\n<p>So, This was about the concept of outline. You can use the outline whenever it is required. Remember that outline is the line drawn beyond the border.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Outline CSS Let\u2019s now study another interesting topic in CSS, which is outline. This may seem similar to borders, but there are some things that need to be discussed. When we talk about the layout of some content with borders, there is some content first, and then a border surrounds the content. So, where is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[9,186,13],"class_list":{"0":"post-400","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css-tutorial","7":"tag-css","8":"tag-css-outline-property","9":"tag-css-tutorial"},"_links":{"self":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":3,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/400\/revisions"}],"predecessor-version":[{"id":5639,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/posts\/400\/revisions\/5639"}],"wp:attachment":[{"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/media?parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/categories?post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gyanipandit.com\/programming\/wp-json\/wp\/v2\/tags?post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}