spot_imgspot_img

Top 5 This Week

spot_img

Related Posts

Css Border-Style Property

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 situs web 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 style="background: #f5f5f5; border: 4px dotted #40E0D0; height: 60px; padding: 10px; width: 400px;”>

<div style="background: #f5f5f5; border: 4px dashed #40E0D0; height: 60px; padding: 10px; width: 400px;”>

<div style="background: #f5f5f5; border: 5px double #40E0D0; height: 60px; padding: 10px; width: 400px;”>

<div style="background: #f5f5f5; border: 6px groove #40E0D0; height: 60px; padding: 10px; width: 400px;”>

<div style="background: #f5f5f5; border: 6px ridge #40E0D0; height: 60px; padding: 10px; width: 400px;”>

<div style="background: #f5f5f5; border: 6px inset #40E0D0; height: 60px; padding: 10px; width: 400px;”>

<div style="background: #f5f5f5; border: 6px outset #40E0D0; height: 60px; padding: 10px; width: 400px;”>
Share ke Facebook >>Share ke Twitter >>
Cafeberita.com yakni blog tentang materi belajar. Gunakan Kolom Search atau pencarian untuk menerima materi mencar ilmu yang ingin dipelajari.

admin
adminhttps://cafeberita.com
Segera hubungi kami melalui WhatsApp untuk informasi lebih lanjut dan jadilah bagian dari komunitas eksklusif kami. Jadikan impian hunian sempurna Anda menjadi kenyataan sekarang! Pengunduh Video Online Gratis : https://r.cafe/

Popular Articles