CSS BORDER-STYLE PROPERTY

Posted by on 19 January 2015 - 3:30 PM

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.

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>




Edutafsi.com adalah blog tentang bahan belajar. Gunakan menu atau penelusuran untuk menemukan bahan belajar yang ingin dipelajari.

Advertisements

0 comments :

Post a Comment