Ketika anda memodifikasi template untuk memperindah tampilan blog, maka salah satu bab yang sebaiknya anda perhatikan yaitu modifikasi border. Border atau garis pinggir ialah bab dari desain yang memegang peranan penting dalam mempercantik blog anda. Jenis border yang paling umum dipakai yaitu jenis border solid yaitu berupa garis utuh dengan warna tertentu. Untuk memodifikasi tampilan blog sedemikian rupa, ada baiknya anda mencoba untuk memakai jenis-jenis border yang lain menyerupai garis putus-putus, garis ganda, dan lain sebagainya. Anda mungkin pernah menemui sebuah situs atau blog yang tidak terlalu menonjolkan border dan cenderung bermain dalam modifikasi warna.
Gaya border biasanya dihubungkan dengan ukuran dan warna border dengan properti border-width untuk tebal border dan border-color untuk warna border. diberikut beberapa value dan fungsinya.
Gaya Border (Border Style)
Properti border dalam CSS memungkinkan kita untuk mengatur dan menyesuaikan model border yang akan ditampilkan. Untuk mengatur gaya border dipakai properti border-style. Nilai atau value dari border-style tersebut memilih gaya border yang akan ditampilkan.Gaya border biasanya dihubungkan dengan ukuran dan warna border dengan properti border-width untuk tebal border dan border-color untuk warna border. diberikut beberapa value dan fungsinya.
None : border tidak ditampilkan.
Solid : menampilkan border dalam bentuk garis utuh atau padat.
Dotted : menampilkan border berupa titik-titik.
Dashed : menampilkan border dalam bentuk garis putus-putus.
Double : menampilkan dua border sekaligus.
Groove : menampilkan border 3D berlekuk.
Ridge : menampilkan border 3D lengkung rabung.
Inset : menampilkan border dengan efek menjorok ke dalam.
Outset : menampilkan border dengan efek timbul.
misal penerapan :
box {
border-style : solid;
border-color : #000;
border-width : 5 px;
}
Ketika anda mengedit artikel dalam mode HTML, anda juga sanggup memanfaatkan properti border untuk membuat border pada konten anda contohnya membuat kotak untuk rumus, membuat border untuk menampilkan sebuah kalimat kutipan, atau saat anda membuat tabel dengan HTML. Berikut beberapa referensi penerapannya :
<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>
Demikianlah modifikasi border untuk memperindah tampilan blog, biar bermanfaa.
Emoticon