CSS Outline Style With HTML Box | Ten Different Outline style
In this Tutorial, we Learn How we can create CSS outline Style we create different kinds of outline style with CSS and also discuss all types of outline design.
therefore, I am sure you will know what is outline design? If you don’t know let’s me explain, the outline is a type of border, the border is a part of the element and outline is not.
Basically everyone uses an outline to give the attractive style an element. There are many types of outline style.
CSS has the following outline properties:
outline-styleoutline-coloroutline-widthoutline-offsetoutline
CSS Outline Style
dotteddashedsoliddoublegrooveridgeinsetoutsetnonehidden
Demonstration of the different types of outline style:
|
1 2 3 4 5 6 7 8 |
p.solid {outline-style: solid;} p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;} p.double {outline-style: double;} p.groove {outline-style: groove;} |
Today you will learn how to create ten different types of outline style. therefore, this post is very useful for the designer or beginner in the website field. there are ten different types of styles like auto, dashed, dotted, outline, solid, double, groove, ridge, inset, outset, etc.
So, nowadays designer creates different outline design for the website, in this blog today I am sharing CSS outline style with HTML Box. there are 10 types of amazing outline style design, I hope you will enjoy this program, you can use this effect on your website for elements such as components, box, cards, etc.
Explanation of Source Code for CSS Outline Style with HTML Box
Let us discuss the source code which I have used for creating ten different types of CSS outline style, First I have created a div class="main" “main”, then taken another div class="box" for ten boxes and put all the boxes inside the class “main” div. therefore boxes width and height 200px. I have also used margin by 30px by top and others is auto. alos for the responsive design, I have used display:grid and grid-related properties (info).
therefore, In the stylesheet for all boxes taken an outline property to create different types of outlines, which I have taken for CSS outline styles such as auto, dashed, dotted, outline, solid, double, groove, ridge, inset, outset, etc.
Therefore, these different types of outline styles to create a different effect. I have also used outline-offset property, the outline-offset sets the amount of space between the edge or border of an element and outline.
these are the whole concepts that I have used to create the program. I hope you will understand easily the code segment after getting the code and you can use this program on your website after a few changes.
For creating this program I have used two files first file for HTML and Second file for CSS. Follow all the steps to create program.
First Step: Create HTML File as name “index.html” | Change file name as you want
|
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 |
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS Outline Styles</title> <link rel="stylesheet" href="css/stylesheet.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 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 solid"></div> <code>solid : 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 inset"></div> <code>inset : outline</code> </div> <div class="box"> <div class="boxes outset"></div> <code>outset : outline</code> </div> </div> </body> </html> |
Second Step: Create CSS File as name “stylesheet.css” | Change file name as you want
|
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 66 67 68 69 |
.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: 30px auto; width: 200px; height: 200px; } code { background-color: #dedede; padding: 8px 16px; border-radius: 8px; } .auto { background-color: #B22222; outline: 50px auto #f13b3b; } .dashed { background-color: #FF4500; outline: 22px dashed white; outline-offset: -12px; } .dotted-1 { background-color: #00FF00; outline: 24px dotted white; outline-offset: -12px; } .dotted-2 { background-color: #20B2AA; outline: 40px dotted white; outline-offset: -18px; } .solid { background-color: #DAA520; outline: 24px outset #f1ae08; outline-offset: -14px; } .double { background-color: #228B22; outline: 14px double white; outline-offset: -20px; } .groove { background-color: #00FFFF; outline: 14px groove #4682B4; outline-offset: -15px; } .ridge { background-color: #FFD700; outline: 14px ridge #FF8C00; outline-offset: -14px; } .inset { background-color: smokewhite; outline: 24px inset #FF4500; outline-offset: -24px; } .outset { background-color: smokewhite; outline: 24px outset #8B008B; outline-offset: -24px; } |
you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these posts.
About Author
