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. Special we use an outline to give the style an element, there are many outline styles we can create using HTML and CSS.
Today you will learn to create 9 different types of outline style. I think this post is useful if you are a designer or beginner on websites field. There are 9 types of styles like auto, double line, groove, ridge, etc. I have tried all the outline styles in HTML based box, you can try anywhere as you want.
So, Today I am sharing CSS Outline Styles with HTML Box. There are many amazing outlines you will shock if you see these first time. You can use these effects on webpage’s elements like cards, box, components, etc. That will be a good practice of CSS for beginners.
If you are thinking now how these outline effects actually are, then see the preview given below.
Preview Of 9 Outline Effects
See this video preview to getting an idea of how these effects look like.
Now you can see these visually, you can also see live by clicking the button above. If you like these, then get the source code of its.
You May Also Like:
- HTML CSS Beautifier and Minifier
- 8 Different Text Effects
- CSS Overlay Menu Example
- Navigation Bar With Hover Effect
CSS Outline Styles With HTML Source Code
Before sharing source code, let’s talk about these. First I have created 9 boxes with 180px width and height. I have also used margin by 40px by the top and others is auto. Also for the responsive design used display: grid; and some other grid-related properties (info).
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.
- auto
- double
- groove
- ridge
- dotted
- dashed
- outset
- inset
These all are the outline value to create a different effect. I have also used outline-offset 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.
For creating this outline style pack you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating these without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <!--Code By Webdevtrcik ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Outline Styles | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <div class="box"> <div class="boxes auto"></div> <code>auto : outline</code> </div> <div class="box"> <div class="boxes double"></div> <code>double : outline</code> </div> <div class="box"> <div class="boxes groove"></div> <code>groove : outline</code> </div> <div class="box"> <div class="boxes ridge"></div> <code>ridge : outline</code> </div> <div class="box"> <div class="boxes dashed"></div> <code>dashed : outline</code> </div> <div class="box"> <div class="boxes dotted-1"></div> <code>dotted : outline</code> </div> <div class="box"> <div class="boxes dotted-2"></div> <code>dotted 2 : outline</code> </div> <div class="box"> <div class="boxes outset"></div> <code>outset : outline</code> </div> <div class="box"> <div class="boxes inset"></div> <code>inset : outline</code> </div> </div> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
/** Code By Webdevtrcik ( https://webdevtrick.com ) **/ .main { display: grid; height: 100%; grid-template-rows: auto 1fr auto; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); text-align: center; } .box { margin-bottom: 50px; } .boxes { margin: 40px auto; width: 180px; height: 180px; } code { background-color: #dedede; padding: 4px 6px; border-radius: 3px; } .auto { background-color: #2ab1ce; outline: 50px auto #a4ecfc; } .double { background-color: #e60023; outline: 14px double white; outline-offset: -20px; } .groove { background-color: #f05855; outline: 14px groove #2bb673; outline-offset: -15px; } .ridge { background-color: #f24c5e; outline: 14px ridge #e60023; outline-offset: -14px; } .dotted-1 { background-color: #5cb85c; outline: 24px dotted white; outline-offset: -12px; } .dotted-2 { background-color: #f05855; outline: 40px dotted white; outline-offset: -18px; } .dashed { background-color: #4267b2; outline: 22px dashed white; outline-offset: -12px; } .outset { background-color: smokewhite; outline: 24px outset#208bfd; outline-offset: -24px; } .inset { background-color: smokewhite; outline: 24px inset #ff8b0e; outline-offset: -24px; } |
That’s It. Now you have successfully created CSS Outline Styles With HTML Box, 9 Different types of Outline Effects. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
I’d suggest you drop all the narrative as it’s pointless, repetitive, brings no came and only wastes time and aggreviates the reader. Just keep the source and demo. As much as I can appreciate the time you took to produce the video, it brings no value as it shows mostly the effect of grid layout while your article is about the outline effect.
If anything, you should have explained how it is that the dashed and dotted outline is matched to the box size and why the dotted2 has fewer (not just larger) white dots? An explanation of your negative offset with a demo of various value for it would have been useful.
nice article thank sir your article is very helpful for my website thank