When you modify your blog template to beautify the look of it, the one part that you should consider is border modification. Border or edge line is part of the design which plays an important role in beautifying your blog.
The most common type of border used is solid border, a solid line with a certain color. To modify the look of your blog in such a way, it's good if you try to use the other types of border like dashed lines, double lines, ridged border, and so forth.
You may ever see a website or blog that do not reveal their borders and tend to play in color modification. But, we think it'll be better if we use it.
The most common type of border used is solid border, a solid line with a certain color. To modify the look of your blog in such a way, it's good if you try to use the other types of border like dashed lines, double lines, ridged border, and so forth.
You may ever see a website or blog that do not reveal their borders and tend to play in color modification. But, we think it'll be better if we use it.
Border-Style Property
Border property in CSS allows us to set and adjust the border style that'll be shown. To set the border style, we can use border-style property. Value of border-style determines the border style that will be displayed. Border-style usually associated with border-width and border-color. None : to define no border
Solid : to define a solid border
Dotted : to define a dotted border.
Dashed : to define a dashed border
Double : to define a double border
Groove :to define a 3D grooved border
Ridge : to define a 3D ridged border
Inset : to define a 3D inset border
Outset : to define a 3D outeset border
Example :
.box {
border-style : solid;
border-color : #000;
border-width : 5 px;
}
When you're editing your post in HTML mode, you can also use the border-style property to make a border of your contents like formulas box, quote, or to make a table with HTML. Here some application samples.
<div style="background: #f5f5f5; border: 4px solid #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 4px dotted #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 4px dashed #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 5px double #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 6px groove #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 6px ridge #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 6px inset #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
<div style="background: #f5f5f5; border: 6px outset #40E0D0; height: 60px; padding: 10px; width: 400px;"></div>
Emoticon